使用jQuery查找多级父元素的数据属性值

Question

我正在尝试访问最近的包含"data-id"属性的锚标签相邻的div元素。

使用.parent().parent().parent()可以实现，但我真的想避免这样做。

<div class="panel panel-default" data-id="@customer.Id">
        <div class="panel-heading clearfix">
            @customer.Name
            <div class="pull-right">
                <a class="btn btn-sm btn-default js-deleteCustomer" href="#" title="Delete">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </a>
        </div>
</div>

我尝试了以下方法：

var customerId = $(this).closest("div:has(*[data-id])").attr('data-id');

- Blake Rivell

Answer 1

You want

var customerId = $(this).closest("div[data-id]").attr('data-id');

:has(*[data-id])并不匹配具有该属性的元素，而是匹配包含具有该属性的另一个元素的元素。被匹配的元素可能没有这个相同的属性，这就解释了为什么:has(*[data-id])无法工作。例如，在以下代码中，它会匹配外部div而不是内部div：

<div>
  <div data-id="@customer.Id"></div>
</div>

为了匹配具有属性的元素，只需直接附加属性选择器，而不使用:has()。

- BoltClock

---

谢谢，这个完美地解决了问题。就像你说的一样，.data() 和 .attr() 都可以使用。唯一的区别是 .data() 返回实际数字，而 .attr() 返回字符串。 - Blake Rivell

@Blake Rivell：啊，好的。我忘记了.data()执行类型转换。 - BoltClock

我刚刚意识到我的主要问题是在实际代码中，我使用的名称是"data-customerId"而不是"data-id"。似乎大写字母在数据属性中无法使用。你知道这一点吗？ - Blake Rivell

@Blake Rivell：我也不是很清楚。搜索得出的结果是这个链接（https://dev59.com/_mQm5IYBdhLWcg3wxBRg#17351380），其中提到了这种行为是.data()特有的。 - BoltClock