父母和appendto不能一起工作吗？

发布于 2024-12-23 17:24:35 字数 1299 浏览 2 评论 0原文

jquery.parents 和 jquery.appendTo 似乎不能一起工作，例如，我想仅向单击按钮的父元素

   $('.local').click(function(){

    var object = $(this);
    var parent = object.parents('.block').css({background:'yellow'});
    $('<li class="item"></li>').appendTo('.items',parent).html('\
        <p>added</p>\
    ');

    return false;
});

html 添加一个新元素，

<!-- block -->
<div class="block">

    <ul class="items"></ul>
    <ul class="menu">
        <a href="#" class="local">add</a>
    </ul>

</div>
<!-- block -->

<!-- block -->
<div class="block">

    <ul class="items"></ul>
    <ul class="menu">
        <a href="#" class="local">add</a>
    </ul>

</div>
<!-- block -->


<!-- block -->
<div class="block">

    <ul class="items"></ul>
    <ul class="menu">
        <a href="#" class="local">add</a>
    </ul>

</div>
<!-- block -->

因此当我单击第一个添加按钮时。 添加的段落应仅添加到第一个添加按钮的父级元素中，而不应添加到具有相同类名的其他父级元素中。

这是测试页面。

我可以修复它吗？或者我一定是编码错误了？

原文

jquery.parents and jquery.appendTo seem don't work together, for instance, I want to add a new element to the clicked button's parent's element only,

   $('.local').click(function(){

    var object = $(this);
    var parent = object.parents('.block').css({background:'yellow'});
    $('<li class="item"></li>').appendTo('.items',parent).html('\
        <p>added</p>\
    ');

    return false;
});

html,

<!-- block -->
<div class="block">

    <ul class="items"></ul>
    <ul class="menu">
        <a href="#" class="local">add</a>
    </ul>

</div>
<!-- block -->

<!-- block -->
<div class="block">

    <ul class="items"></ul>
    <ul class="menu">
        <a href="#" class="local">add</a>
    </ul>

</div>
<!-- block -->


<!-- block -->
<div class="block">

    <ul class="items"></ul>
    <ul class="menu">
        <a href="#" class="local">add</a>
    </ul>

</div>
<!-- block -->

so when I click the first add button. the added paragraph should be added to the first's add button's parent's element only but not other parents which have the same class name.

Here is the test page.

Can I fix it? Or I must have coded it wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉生梦死 2024-12-30 17:24:36

.appendTo() 不能这样工作。试试这个：

  $('.local').click(function(){

    var object = $(this);
    var parent = object.parents('.block').css({background:'yellow'});
    $('<li class="item"></li>').appendTo($('.items',parent)).html('\
        <p>added</p>\
    ');

    return false;
});

它应该是 .appendTo($('.items',parent))，而不是 .appendTo('.items',parent))。

.appendTo() doesn't work that way. Try this:

  $('.local').click(function(){

    var object = $(this);
    var parent = object.parents('.block').css({background:'yellow'});
    $('<li class="item"></li>').appendTo($('.items',parent)).html('\
        <p>added</p>\
    ');

    return false;
});

Instead of .appendTo('.items',parent)), it should be .appendTo($('.items',parent)).

回复收藏 0 原文

染年凉城似染瑾 2024-12-30 17:24:36

试试这个：

$(document).on("click", ".local", function(){
    $(this)
        .closest(".block")
        .css("background-color","yellow")
        .find("ul.items")
        .append( $("<li>")
            .attr("class","item")
            .html( $("<p>").html("added") );
        );
});

示例。

请注意 on() 是在 jQuery 1.7 中添加的。

我们将点击处理程序附加到任何具有 local 类的元素。单击时，它将向上遍历 DOM，直到找到类 block 最接近的元素。它将背景颜色设置为黄色，然后选择具有类 items 的子 ul。然后它附加新的 li 元素。同时，我们还使用jQuery设置了li的类和文本。

Try this:

$(document).on("click", ".local", function(){
    $(this)
        .closest(".block")
        .css("background-color","yellow")
        .find("ul.items")
        .append( $("<li>")
            .attr("class","item")
            .html( $("<p>").html("added") );
        );
});

Example.

Please note that on() was added in jQuery 1.7.

We attach the click handler to any element with class local. When clicked, it will traverse up the DOM until it finds the closest element with class block. It sets it background color to yellow then selects its child ul with class items. It then appends the new li element. Meanwhile, we also set the li's class and text with jQuery.

回复收藏 0 原文

~没有更多了~