親divのデータ属性値を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'); 

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()を使用せずに直接属性セレクタを取り付け、属性を持つ要素にマッチします。