单击链接时，查找具有某个子项的父项是否存在jquery

when link is clicked, find if parent with certain child exists jquery

本文关键字：是否 jquery 存在 链接 查找 单击      更新时间：2023-09-26

我要寻找的是一种确定单击链接的父级是否包含与预定子级匹配的id的方法，类为row-fluid。

到目前为止，我尝试过的就是这里。（jsFiddle）

有人能解释一下为什么我的代码不起作用吗？而且，我的代码非常糟糕，所以任何关于速记代码的建议都可以。我经常想得太多

<div class="row-fluid">
    <div id="success-1">Entry One</div>
    <div class="span3"> <a href="#" id="1" class="delete-me">delete</a>
    </div>
</div>
<div class="row-fluid">
    <div id="accord-2">Entry Two</div>
    <div class="span3"> <a href="#" id="2" class="delete-me">delete</a>
    </div>
</div>
<div class="row-fluid">
    <div id="success-3">Entry Three</div>
    <div class="span3"> <a href="#" id="3" class="delete-me">delete</a>
    </div>
</div>

JS:

$('.delete-me').on('click', function () {
    var id = $(this).attr("id");
    if ($(this).parent(".row-fluid").has("#accord-*")) {
        var name = $("#accord-" + id).html();
        alert(name);
    }else{
        var name = $("#success-" + id).html();
        alert(name);
    }
});

以下操作将起作用-只有if中的条件已更改：

$('.delete-me').on('click', function () {
    var id = $(this).attr("id");
    if ($(this).closest(".row-fluid").has("[id^='accord-']").length > 0) {
        var name = $("#accord-" + id).html();
        alert(name);
    }else{
        var name = $("#success-" + id).html();
        alert(name);
    }
});

演示：http://jsfiddle.net/RZPW2/15/

您的if条件的主要问题：

if($(this).parent(".row-fluid").has("#accord-*")) {

它总是truthy，因为.has()方法返回的是jQuery对象，而不是布尔对象，并且任何对象都是truthy。

此外，.parent()方法只获取直接父元素，在锚点的情况下，它不是.row-fluid元素-请使用.closest()来查找该类的最近祖先。

最后，要通过以特定字符串开头的id进行选择，请使用以选择器开头的属性。

如果每个组总是包含accord-*或success-*元素，则可以为这两个元素都指定一个公共类：

<div id="success-1" class="entryName">Entry One</div>

因为那样你就根本不需要if测试了：

$('.delete-me').on('click', function () {
    var name = $(this).closest(".row-fluid").find(".entryName").html();
    alert(name);
});

演示：http://jsfiddle.net/RZPW2/18/

代码中的几个问题：

  1. $(this).parent(".row-fluid")不起作用，因为该行不是链接的直接父级，您应该使用closest(".row-fluid")向上遍历并找到与选择器匹配的第一个父级

  2. 您不能像在has("#accord-*")中那样在选择器中使用通配符，您需要使用以选择器开头的属性："[id^='accord-']"，而且has()返回jQuery对象，而不是布尔

  3. 这不是一个真正的问题，但您应该使用数据属性来遵守HTML5标准<a href="#" data-id="3" class="delete-me">delete</a>

如果你想稍微简化一下，你可以写

$('.delete-me').on('click', function () {
    var id = $(this).data('id');
    alert($(this).closest('.row-fluid').find('#success-'+id+',#accord-'+id).text());
});

更新的fiddle

现在，我还没有完全了解这一点，但我认为这与访问正确的父级有关，从父级遍历DOM并获取正确的DIV。如果这永远是你的DIV的结构，那么你可以这样做：

$(".delete-me").on("click", function () {
    var obj = $(this), id = obj.attr("id"), parent = obj.parent().parent(), name = parent.find("div[id$='-" + id + "']").html();
    alert(name);
});

它使用以选择器（id$=）结尾，或者因为这是树中唯一一个带有ID的DIV，所以可以使用has属性，如下所示：

$(".delete-me").on("click", function () {
    var obj = $(this), parent = obj.parent().parent(), name = parent.find("div[id]").html();
    alert(name);
});
相关文章：