查找非父元素的Jquery

我有一个用按钮动态创建的页面。 如果单击“li链接编辑”或“显示”，我希望找到相应的按钮数据ID值？ 我试过了，但没有成功

<div class=\"btn-group\">
    <button type=\"button\" class=\"btn dropdown-toggle actions\" data-ids=\"1\" data-toggle=\"dropdown\" aria-expanded=\"false\">
        <span class=\"glyphicon glyphicon-edit\"></span>
    </button>
    <ul class=\"dropdown-menu\" role=\"menu\">
        <li><a href=\"\" class="edit">Edit</a></li>
        <li><a href=\"\" class="show">Show</a></li>
    </ul>
</div>
<div class=\"btn-group\">
    <button type=\"button\" class=\"btn dropdown-toggle actions\" data-ids=\"2\" data-toggle=\"dropdown\" aria-expanded=\"false\">
        <span class=\"glyphicon glyphicon-edit\"></span>
    </button>
    <ul class=\"dropdown-menu\" role=\"menu\">
        <li><a href=\"\" class="edit">Edit</a></li>
        <li><a href=\"\" class="show">Show</a></li>
    </ul>
</div>
...

如果它不是父元素，我怎么办？谢谢

查找有效的父btn组，并使用“查找”获取所需的子组

var ids = $(this).closest('.btn-group')    //common parent containing the desired element
                 .find('button.actions')   //find the element
                 .data('ids'); 

使用

另外，您是否动态附加此标记？如果否，则不需要转义引号\\

如果元素是动态附加的，则需要使用委派

Fiddle:

查找有效的父btn组，并使用Find获取所需的子组

var ids = $(this).closest('.btn-group')    //common parent containing the desired element
                 .find('button.actions')   //find the element
                 .data('ids'); 

使用

另外，您是否动态附加此标记？如果否，则不需要转义引号\\

如果元素是动态附加的，则需要使用委派

Fiddle:

按钮。操作不是的父项。编辑，使用

或

button.actions不是的父级。编辑，使用

或

---

如果元素是动态添加的，则需要更改以使用委托事件处理程序，该事件处理程序附加到未更改的祖先元素：

e、 g

on的此版本应用jQuery选择器，即在事件时编辑，而不是在注册事件时编辑。这意味着元素只需要在单击时存在，它才能工作

另一个问题是，您寻找的项目不是祖先，因此您需要先上后下搜索另一个分支

e、 g

找到共同的btn组祖先，然后向下搜索操作按钮

JSFiddle：

---

注意：我显然必须将JSFIDLE的文本HTML转换为HTML，即删除转义

如果元素是动态添加的，则需要更改为使用委托事件处理程序，附加到非更改的祖先元素：

e、 g

on的此版本应用jQuery选择器，即在事件时编辑，而不是在注册事件时编辑。这意味着元素只需要在单击时存在，它才能工作

另一个问题是，您寻找的项目不是祖先，因此您需要先上后下搜索另一个分支

e、 g

找到共同的btn组祖先，然后向下搜索操作按钮

JSFiddle：

---

注意：我显然必须将JSFIDLE的文本HTML转换为HTML，即删除转义

。操作不是edit按钮的父元素。您需要获取两个节点的公共父节点，然后找到.action元素

var ids = $(this).closest(".btn-group").find('button.actions').attr('data-ids');

或

---

.操作不是编辑按钮的父元素。您需要获取两个节点的公共父节点，然后找到.action元素

var ids = $(this).closest(".btn-group").find('button.actions').attr('data-ids');

或

---

我认为实现这一点的最简单方法是将dataids属性也添加到下拉菜单ul中。然后你可以用

$('.edit').on('click', function(e) {
  e.preventDefault();
  var ids = $(e.target).parent().data('ids');
});

---

我认为实现这一点的最简单方法是将dataids属性也添加到下拉菜单ul中。然后你可以用

$('.edit').on('click', function(e) {
  e.preventDefault();
  var ids = $(e.target).parent().data('ids');
});

---

---

为什么要把\放进所有属性？@Anoop Joshi:大概这是他的字符串模板。@TrueBlueAusie-是的is@Paolo罗西：总是最好包括周围的代码，因为遗漏了一点细节，导致各种疯狂的评论被添加到答案中，现在大部分被删除：@TrueBlueAussie-Ok，很抱歉，我以为你明白那是一段代码。你为什么要把\放进所有属性？@Anoop Joshi：大概那是他的字符串模板。@TrueBlueAussie-是的is@Paolo罗西：总是最好包括周围的代码，因为遗漏了那个小细节会导致各种疯狂的评论被添加到现在的答案中大部分删除：@TrueBlueAussie-好的，我很抱歉，但我以为你明白这是一段代码..1。您没有删除\\转义\。2.您已使用attr 1。您没有删除\\转义\。2.您已经使用了attr works，只是您不能将转义引号放在其中，请将第一个引号与prev一起使用，速度应该会快一点。注释：对于单击事件，任何速度差异都可以忽略，除非他们每秒单击50000次！：第二个选项更适合于维护，因为它更有可能在对DOM.works的更改中幸存下来，只是你不能将转义引号放在那里，将第一个选项与prev一起使用，它应该快一点。注释：对于单击事件，任何速度差都可以忽略，除非他们每秒单击50000次！：第二个选项更适合于维护，因为它更有可能在DOM的变化中生存。@TrueBlueAusie-I将小提琴作为问题点海报。不是作为一个开发者。除非您没有更改html，否则您无法给出此问题的正确答案。我的想法总是正确的point@JqueryKing：HTML对字符串文本模板有效，因此不需要更正，只是对JSFIDLE无效。恐怕在这种情况下，你的傲慢是在写你的技能无法兑现的支票：@TrueBlueAussie-我把小提琴当作问题海报。不是作为一个开发人员

---

每除非您没有更改html，否则您无法给出此问题的正确答案。我的想法总是正确的point@JqueryKing：HTML对字符串文本模板有效，因此不需要更正，只是对JSFIDLE无效。恐怕在这种情况下，你的傲慢是在写你的技能无法兑现的支票：@TrueBlueAussie-我把小提琴当作问题海报。不是作为一个开发者。除非您没有更改html，否则您无法给出此问题的正确答案。作为“JQUERYKING@TrueBlueAussie”，我的观点总是正确的——我把小提琴作为问题的海报。不是作为一个开发者。除非您没有更改html，否则您无法给出此问题的正确答案。作为“JQUERYKING”，我的观点总是正确的

var ids = $(this).closest(".btn-group").find('button.actions').attr('data-ids');

var ids = $(this).parent().prev().attr('data-ids');

$('.edit').on('click', function(e) {
  e.preventDefault();
  var ids = $(e.target).parent().data('ids');
});