jQuery 通过按类搜索来获取元素的 id

Question

这是我的 html ：

<div id="my_box_one" class="head-div">
   <div>
       <div class="some_box">a</div>
       <div class="some_box">b</div>
    </div>
</div>

我想使用该 div 的类（“.head-div”）获取父 div（“#my_box_one”）的 ID

$(document).ready(function(){

$(".some_box").click(function(){
   var abc = $(this).parentsUntil(".head-div").attr("id");
   // also tried $(this).parent(".head-div") -- same effect
   alert(abc); // Shows as Undefined
});   

});

我可以执行以下操作，它会正常工作，但它不会'看来是对的。

var abc = $(this).parent("div").parent("div").attr("id");

Answer 1

您可以使用 .closest( 选择器 )，例如：

var abc = $(this).closest(".head-div").attr("id");

http://api.jquery.com/closest/

.parent( 选择器 ) 仅选择元素的直接父元素。

Answer 2

parentsUntil 获取所有父元素，直到选择器匹配为止。它不包括匹配的元素。您正在尝试获取中间 div 的 id，这显然是未定义的。

您需要使用 closest，它会沿着 DOM 树向上查找，直到找到与选择器匹配的元素，然后仅返回该元素：

var abc = $(this).closest(".head-div").attr("id");

---

编辑：为了提高速度，但在更改标记时灵活性较差，可以使用 parentNode 属性：

var abc = this.parentNode.parentNode.id;