Question

我有一个用按钮动态创建的页面。如果单击li链接编辑或显示，我想找到相应的按钮data-id值？我尝试使用nearest（）但没有成功。

<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>
...

JS

$('.edit').on('click', function(e) {

    e.preventDefault();
    var ids = $(this).closest('button.actions').attr('data-ids');
});

我怎么能这样做，看到它不是父元素？谢谢

Answer 1

找到有效的父母（btn-group），并使用find()来获得所需的孩子。

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

使用data() instead of attr()。

另外，您是否动态添加此标记？如果不是，则无需转义引号\"\"。

如果动态附加元素，则需要使用委托。

Event binding on dynamically created elements

小提琴：http://jsfiddle.net/uxtu6qm3/3/

Answer 2

button.actions不是.edit的父母，请使用

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

OR

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

Answer 3

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

e.g。

$(document).on('click', '.edit', function(e) {

此版本的on在事件时应用jQuery选择器（即.edit），而不是在事件注册时应用。这意味着元素只有在点击发生时才需要存在。

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

e.g。

  $(this).closest('.btn-group').find('button.actions')

找到共同的btn-group祖先然后搜索操作按钮。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/uxtu6qm3/4/

注意：我显然必须将文字HTML转换为HTML用于JSFiddle（即删除转义）

Answer 4

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

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

或

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

Answer 5

我认为实现这一目标的最简单方法是将data-ids属性添加到下拉菜单ul中。然后你可以使用

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

Jquery查找非父元素

5 个答案: