Question

我如何获得h3孩子li的归属？

<ul>
   <li>
      <h3> Element 1</h3>
      <ul>
        <li data-id="5">Element 1.1</li>
      </ul>
   </li>
</ul>

当我点击H3时，我如何从孩子李那里得到data-id？我尝试使用JQuery.child()和JQuery.find()，但没有效果......

$(document).ready(function(){
    $("h3").click(function(event){
        var obj = event.target; //H3 here

        //First attempt:  1º child = ul   |   2º child = li
        $(obj).child().child().attr('data-id');
       //Second attempt:
       $(obj).find("li").attr('data-id');

    })
})

有更好更正确的方法吗？

Answer 1

jQuery的.next()方法允许您查询DOM中与特定选择器匹配的下一个元素。当您正在寻找的元素不一定是后代时，这尤其有用。

因此，如果您将点击事件处理程序中的h3元素引用为this，则可以执行$(this).next('li').data('id')。

除此之外：.find()无需再次查询该元素;您可以在.next()步骤中查询li元素。

有关.next()的更多信息：https://api.jquery.com/next/

Answer 2

找到h3的下一个元素并获得ul，然后使用.find()找到它，使用以下代码：

 $(document).ready(function(){
   $("h3").click(function(event){        
     $(this).next().find("li").data('id');

   })
 })

Answer 3

在您的情况下，您定位的li是h3的下一个兄弟的后代。

.find()用于查找调用元素的后代，但在这种情况下，目标元素不是h3的后代

＆＃13;

$(document).ready(function() {
  $("h3").click(function(event) {
    var id = $(this).next().find('li').data('id');
    snippet.log('id: ' + id)
  })
})

＆＃13;

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <h3> Element 1</h3>
    <ul>
      <li data-id="5">Element 1.1</li>
    </ul>
  </li>
</ul>

＆＃13;

获取子元素的属性

3 个答案: