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

Question

在这里，我的HTML结构和相同的结构可重复次数相同类别的名称。我想要做的是有一次，我在.innerDiv点击我应该能够访问attr接近它的父元素的.inid值。

以下是我已经尽力了，但它不工作。我也尝试添加类名的元素我想要得到的价值。但其类添加到所有.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的指数，并添加类TestClass中，以元素与类 - INID

1. 使用索引查找点击innerDiv指数（”。innerDiv）
2. 使用该索引使用情商添加类
3. 添加一些示例CSS测试类测试
4. 在你的代码中的语法错误 - 收盘报价失踪讲座第二最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最近（）功能来查找父格，然后找到与父元素中的类“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/