使用 jQuery 遍历 DOM

Question

给定以下 html DOM:

<div>
    <div>
        <input data-id="somevalue">
    </div>
    <div>
        <a href="">edit</a>
    </div>
</div>

单击编辑后，我想获取 somevalue。

A) 我会使用 .parent().parent().find() 还是有更合适的解决方案？
B) 如何获得 data-select 的值？我知道如何通过 ID 或 class 获取它，但不清楚用于数据属性的语法。

使用以下内容：

var id = $(this).parent().parent().find().attr('id');<br> console.log(id);

输出 undefined 所以我不确定我是否有遍历问题或者我是否没有正确的语法来获取数据属性值。

Answer 1

你可以使用

$(this).parent().prev().children().data('id')

:

$('a').click(function(e) {
  e.preventDefault();
  console.log(
    $(this).parent().prev().children().data('id')
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        <input data-id="somevalue">
    </div>
    <div>
        <a href="">edit</a>
    </div>
</div>

你的 .find()，没有参数，没有给你任何结果，因为你没有传递给它任何选择器来查找。此外，属性不是 id - 属性是 data-id，因此您应该使用 data('id') 而不是 attr('id')。

使用 jQuery 遍历 DOM

using jQuery to traverse the DOM

jquery

dom-traversal

jquery-traversing