javascript - 使用 jQuery 查找多个级别的父 div 的数据属性值

Question

我正在尝试从具有 data-id 属性的 anchor 标记访问最近的 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');

Answer 1

你想要

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()。