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

Question

这里我有 HTML 结构，并且相同的结构可能会使用相同的类名重复多次。我想做的是，一旦我点击 .innerDiv 我应该能够访问 .inid close 的 attr 值到其父元素。

这是我尝试过的方法，但它不起作用。我还尝试将类名添加到我试图从中获取值的元素。但它使用 .inid 将类添加到所有元素。我该怎么做？

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

为了达到预期的结果，使用innerDiv的索引并将class-testclass添加到class-inid的元素

1. 使用 index('.innerDiv) 查找点击的 innerDiv 的索引
2. 使用该索引通过 eq 添加类
3. 向测试类添加一些示例 css 进行测试
4. 代码中存在语法错误 - 类中缺少结束引号 -​​ second-most-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>