How to get the attribute value of the closest element

Question

Here i have HTML structure and the same structure may repeat number of times with the same class names. what i'm trying to do is once i click on the .innerDiv i should be able to access the attr value of the .inid close to its parent element.

here is what i have tried, but its not working. i also tried adding the classname to the element i'm trying to get the value from. but its adding the class to all the element with .inid . how can i do this?

HTML

<div class="parent_div">
<div class="content-container">
   <div class="second-most-innerdiv>
     <div class="container-box">
        <div class="innerDiv">Click here</div>
     </div>
   </div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>

<div class="parent_div">
<div class="content-container">
   <div class="second-most-innerdiv>
     <div class="container-box">
        <div class="innerDiv">Click here</div>
     </div>
   </div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>

Jquery

$(this).on('click',function(){
    $('.innerDiv').parents().find('.inid').addClass('testclass');
    $('.innerDiv').parents().find('.inid').attr(data-attr);
});

Answer 1

To achieve expected result, use index of innerDiv and add class-testclass to element with class- inid

1. Find index of clicked innerDiv using index('.innerDiv)
2. Use that index to add class using eq
3. Add some sample css to testclass for testing
4. Syntax error in your code - closing quotes missing for class- second-most-innerdiv

Codepen - https://codepen.io/nagasai/pen/

working example

 $('.innerDiv').on('click',function(){ $('.inid').eq($(this).index('.innerDiv')).addClass('testclass'); console.log($('.inid').eq($(this).index('.innerDiv')).attr('data-attr')) }); 

 .testclass{ background: red; height: 10px; width:10px } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent_div"> <div class="content-container"> <div class="second-most-innerdiv"> <div class="container-box"> <div class="innerDiv">Click here</div> </div> </div> </div> <div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div> </div> <div class="parent_div"> <div class="content-container"> <div class="second-most-innerdiv> <div class="container-box"> <div class="innerDiv">Click here</div> </div> </div> </div> <div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div> </div> 

Answer 2

Using JQuery closest() feature to find the parent div, then find the element with class "inid" within that parent element and get the value of the attribute.

$('.innerDiv').on('click',function(){
    var inid = $(this).closest('.parent_div').find('.inid');
    inid.addClass('testclass');
    console.log('selected -> ' + inid.attr(data-attr));
});

Source: https://api.jquery.com/closest/