0

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

到目前为止我尝试过的是这里。(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);
    }
});
4

3 回答 3

3

以下将起作用 - 只有条件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使用以特定字符串开头的属性进行选择，请使用以 selector 开头的属性。

如果每个组总是包含accord-*orsuccess-*元素，你可以给这两个元素一个公共类：

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

于 2013-08-11T21:44:48.290 回答
2

您的代码有几个问题：

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

  2. 您不能在选择器中使用通配符，例如 in has("#accord-*")，您需要使用以selector:开头的属性"[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());
});

更新的小提琴

于 2013-08-11T21:45:38.313 回答
0

现在，我对此不是 100% 的，但我认为这与访问正确的父级有关，从该父级中遍历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$=，或者因为它是树中唯一DIV带有 a 的ID，所以您可以使用has 属性，如下所示：

$(".delete-me").on("click", function () {
    var obj = $(this), parent = obj.parent().parent(), name = parent.find("div[id]").html();
    alert(name);
});
于 2013-08-11T21:47:14.377 回答