更新

Question

当我单击按钮时，我试图从部分ID中检索父ID。

html样本：

<div class="test" id="my-id-123">
 <div class="etc">
   <button>button </button>
 <div>
<div>

<div class="test" id="my-id-456">
 <div class="etc">
   <button>button </button>
 <div>
<div>

因此，当我单击第二个按钮时，是否可以使用部分ID“我的ID”来检索正确的父母ID？

我尝试了以下方法，但是它只给我所有ID：

$('[id*="my-id"').closest('div')

Answer 1

您可以使用jQuery的closest()功能

对于集合中的每个元素，获取与通过测试元素本身并遍历其元素的选择器 DOM树中的祖先。

如果需要ID，请单击按钮，然后在onclick函数中编写以下内容。

$(this).closest('.test').attr('id');

更新

或者您可以使用以下.prop()这是最佳做法

$(this).closest('.test').prop('id');

Answer 2

如果必须保持HTML原样，请将其放入事件处理程序中。

$(".etc > button").click(function(){
  var grandParent=$(this).parent().parent();
  console.log(grandParent[0].id);//Prints my-id-xxx
});

有个小提琴只是为了验证：JSFiddle 它将其记录到javascript控制台中，该控制台可在F12下访问。

编辑：正如Taplar指出的那样，这很容易受到DOM中任何更改的影响，并且.closest()方法更好。重写以反映这一点，就可以了。

$(".etc > button").click(function(){
    var grandParent=$(this).closest(".test");
  console.log(grandParent[0].id);
});

从jQuery中的部分ID检索完整ID

2 个答案:

更新