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

Question

我正在寻找的是一种方法，用于确定所单击的链接的父级(具有 row-fluid 类)是否包含与预定子级匹配的 id。

到目前为止我尝试过的是Here. (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);
    }
});

Answer 1

以下内容有效 - 仅 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-*")) {

...它始终是真值，因为 .has() 方法返回一个 jQuery 对象而不是 bool 值，并且任何对象都是真值。

此外，.parent() 方法仅获取直接父元素，在 anchor 的情况下，该父元素不是 .row-fluid 元素 - 使用 .closest() 而不是转到该类最接近的祖先。

最后，要通过以特定字符串开头的 id 进行选择，请使用 attribute starts with selector .

如果每个组始终包含 accord-* 或 success-* 元素，您可以为这两个元素提供一个公共(public)类:

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