Question

这里我具有HTML结构，相同的结构可能会使用相同的类名重复多次。我想做的是一旦单击.innerDiv，我应该能够访问其父元素附近的attr的{{1}}值。

这是我尝试过的方法，但无法正常工作。我还尝试将类名添加到我要从中获取值的元素中。但是它使用.inid将类添加到所有元素。我该怎么办？

HTML

.inid

jQuery

<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 1

要获得预期的结果，请使用innerDiv的索引，并将class-testclass添加到具有class-inid的元素中

使用 index（'。innerDiv）

innerDiv

使用该索引使用 eq
将一些示例CSS添加到testclass进行测试
您的代码中出现语法错误-类- -innerdiv-innerdiv

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

工作示例

$('.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

使用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));
});

来源：https://api.jquery.com/closest/

如何获取最接近元素的属性值

2 个答案: