I have a problem that for experts is very simple.

I do looping on some html tags like the following snippet:

// looping
<div class="toggle m-toggle-accordian">
    <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p>
    <p>Rp 5000</p>
</div>
<div class="collapse m-coll-air-unselected">
    <div class="m-offer-detail">
        <div class="col-xs-8 m-offer-caption">Cicilan per Bulan</div>
        <div class="col-xs-4 m-offer-amount">Rp 4000</div>
    </div>
    <div class="m-offer-detail">
        <div class="button-click">Pilih</div>
    </div>
</div>
// end looping

I want to when clicking button with class 'button-click' want to get id value from class 'i-want-to-get-this'.

I tried using .find () but have not succeeded.

$(this).find('.i-want-to-get-this').attr('id');

I have a problem that for experts is very simple.

I do looping on some html tags like the following snippet:

// looping
<div class="toggle m-toggle-accordian">
    <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p>
    <p>Rp 5000</p>
</div>
<div class="collapse m-coll-air-unselected">
    <div class="m-offer-detail">
        <div class="col-xs-8 m-offer-caption">Cicilan per Bulan</div>
        <div class="col-xs-4 m-offer-amount">Rp 4000</div>
    </div>
    <div class="m-offer-detail">
        <div class="button-click">Pilih</div>
    </div>
</div>
// end looping

I want to when clicking button with class 'button-click' want to get id value from class 'i-want-to-get-this'.

I tried using .find () but have not succeeded.

$(this).find('.i-want-to-get-this').attr('id');

• javascript
• jquery
• html

• Try this $($(this).parent().parent().parent().find('.i-want-to-get-this')[0]).attr('id'); – Nandita Sharma Commented Jul 17, 2018 at 9:09
• Why do you use $(this) ? Take a look at w3schools./jquery/jquery_ref_selectors.asp – Med Commented Jul 17, 2018 at 9:09
• I added my answer please have a look – Natsathorn Commented Jul 17, 2018 at 9:22
• Thanks @NanditaAroraSharma this work. – Wisnu Commented Jul 17, 2018 at 9:25
• Thanks @Med, I will read more references again – Wisnu Commented Jul 17, 2018 at 9:25

7 Answers 7

Use $($(".button-click").parent().parent().parent().find('.m-toggle-accordian .i-want-to-get-this')[0]).attr('id') to target the required element

$(document).on("click", ".button-click", function() {

  console.log($($(this).parent().parent().parent().find('.m-toggle-accordian .i-want-to-get-this')[0]).attr('id'));

})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle m-toggle-accordian">
  <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p>
  <p>Rp 5000</p>
</div>
<div class="collapse m-coll-air-unselected">
  <div class="m-offer-detail">
    <div class="col-xs-8 m-offer-caption">Cicilan per Bulan</div>
    <div class="col-xs-4 m-offer-amount">Rp 4000</div>
  </div>
  <div class="m-offer-detail">
    <div class="button-click">Click me</div>
  </div>
</div>

Get id from Class using below code

$('.button-click').click(function(){
    alert($('.i-want-to-get-this').attr('id'))
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle m-toggle-accordian">
            <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p>
            <p>Rp 5000</p>
        </div>
        <div class="collapse m-coll-air-unselected">
            <div class="m-offer-detail">
                <div class="col-xs-8 m-offer-caption">Cicilan per Bulan</div>
                <div class="col-xs-4 m-offer-amount">Rp 4000</div>
            </div>
            <div class="m-offer-detail">
                <div class="button-click">Pilih</div>
            </div>
        </div>

I just realize that's you are looping create elements so I think you need to add some more code like this.

So when you are looping for create an element why don't you add a value to as a button attribute

<div class="button-click" data-elementId="biaya-123">Pilih</div>

Then you can easy get with jquery

$('.button-click').click(function () {
    var myId = $(this).data('elementId'); // to get the target element ID
    var targetElement = $('#' + myId); // to get the targetElement
})

$(".button-click").on("click", function(){
	console.log( $(this).parents(".m-coll-air-unselected").prev(".m-toggle-accordian").find(".i-want-to-get-this").attr("id") );
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle m-toggle-accordian">
  <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p>
  <p>Rp 5000</p>
</div>
<div class="collapse m-coll-air-unselected">
  <div class="m-offer-detail">
    <div class="col-xs-8 m-offer-caption">Cicilan per Bulan</div>
    <div class="col-xs-4 m-offer-amount">Rp 4000</div>
  </div>
  <div class="m-offer-detail">
    <div class="button-click">Click me</div>
  </div>
</div>

<div class="toggle m-toggle-accordian">
  <p class="i-want-to-get-this" id="biaya-123">Foo Bar 0%</p>
  <p>Rp 5000</p>
</div>
<div class="collapse m-coll-air-unselected">
  <div class="m-offer-detail">
    <div class="col-xs-8 m-offer-caption">Element 2</div>
    <div class="col-xs-4 m-offer-amount">foo bar</div>
  </div>
  <div class="m-offer-detail">
    <div class="button-click">Click me 2</div>
  </div>
</div>

You can do it this way: https://codepen.io/creativedev/pen/BPKbGP

$('.button-click').on('click', function(e){      
  console.log($(this).parents('.m-coll-air-unselected').prev('div').find('.i-want-to-get-this').attr('id'))
})

You can achieve this by creating parent element, like this :-

<div class="parent">
 <div class="toggle m-toggle-accordian">
  <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p>
  ...
 </div>
 <div class="collapse m-coll-air-unselected">
 ...
  <div class="m-offer-detail">
   <div class="button-click">Pilih</div>
  </div>
 </div>
</div>

Javascript

$('.button-click').click(function() {
 $(this).parents('.parent').find('.i-want-to-get-this').attr('id');
});

We don't know if "i-want-to-get-this" class name is unique and since we are talking about loops it's better not to jump outside the looped tags. We can move between tags with $.closest() and $.prev()

This is still bad practice, because we are risking to brake the functionality. If someone inputs additional tag into the loop then function probably not work

Edit: If we assume the div tag with class "toggle" is constant we can also set .prev('.toggle') so we will minimize the possibility of getting other ids.

I'm going to suggest you to add data-id or similar data attribute on your button like: <button data-id='my-id-1' class="button-click">Click me</button> Then you can simply use $(this).data('id')

$(document).on("click", ".button-click", function() {

  console.log($(this).closest('.collapse').prev().find('.i-want-to-get-this').first().attr('id'));

})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle m-toggle-accordian">
  <p class="i-want-to-get-this" id="i_got_id_1">Biaya Admin 0%</p>
  <p>Rp 5000</p>
</div>
<div class="collapse m-coll-air-unselected">
  <div class="m-offer-detail">
    <div class="col-xs-8 m-offer-caption">Cicilan per Bulan 1</div>
    <div class="col-xs-4 m-offer-amount">Rp 4000</div>
  </div>
  <div class="m-offer-detail">
    <button class="button-click">Click me</button>
  </div>
</div>

<div class="toggle m-toggle-accordian">
  <p class="i-want-to-get-this" id="i_got_id_2">Biaya Admin 1%</p>
  <p>Rp 5000</p>
</div>
<div class="collapse m-coll-air-unselected">
  <div class="m-offer-detail">
    <div class="col-xs-8 m-offer-caption">Cicilan per Bulan 2</div>
    <div class="col-xs-4 m-offer-amount">Rp 4001</div>
  </div>
  <div class="m-offer-detail">
    <button class="button-click">Click me</button>
  </div>
</div>

<div class="toggle m-toggle-accordian">
  <p class="i-want-to-get-this" id="i_got_id_3">Biaya Admin 113%</p>
  <p>Rp 5000</p>
</div>
<div class="collapse m-coll-air-unselected">
  <div class="m-offer-detail">
    <div class="col-xs-8 m-offer-caption">Cicilan per Bulan 3</div>
    <div class="col-xs-4 m-offer-amount">Rp 7000</div>
  </div>
  <div class="m-offer-detail">
    <button class="button-click">Click me</button>
  </div>
</div>