[英]How to get the attribute value of the closest element
Here i have HTML structure and the same structure may repeat number of times with the same class names. 在这里,我具有HTML结构,相同的结构可能会使用相同的类名重复多次。 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. 我想做的是一旦单击.innerDiv
我应该能够访问靠近其父元素的.inid
的attr
值。
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
. 但是它使用.inid
将类添加到所有元素中。 how can i do this? 我怎样才能做到这一点?
HTML 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 jQuery的
$(this).on('click',function(){
$('.innerDiv').parents().find('.inid').addClass('testclass');
$('.innerDiv').parents().find('.inid').attr(data-attr);
});
To achieve expected result, use index of innerDiv and add class-testclass to element with class- inid 为了获得预期的结果,请使用innerDiv的索引,并将class-testclass添加到具有class-inid的元素中
Codepen - https://codepen.io/nagasai/pen/ 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>
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. 使用JQuery最近的()功能查找父div,然后在该父元素中找到具有“ inid”类的元素,并获取属性的值。
$('.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/ 资料来源: https : //api.jquery.com/closest/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.