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对象而不是一个布尔值，任何对象都是真的。

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

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

如果每个群组总是包含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/

Answer 2

您的代码存在一些问题：

$(this).parent(".row-fluid")无效，因为该行不是您链接的直接父级，您应该使用closest(".row-fluid")遍历并找到与选择器匹配的第一个父级
您不能在has("#accord-*")中的选择器中使用通配符，您需要使用attribute starts with选择器："[id^='accord-']"，同时has()返回一个jQuery对象，而不是布尔值
不是真正的问题，但您应该使用数据属性来符合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());
});

<强> Updated fiddle

Answer 3

现在，我不是百分之百，但我认为这与访问正确的父对象有关，可以从中遍历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);
});

哪个使用ends with selector（id$=），或者因为这是树中唯一DIV ID，您可以使用has attribute之类的这样：

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

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

3 个答案: