родители и приложение не работают вместе? - PullRequest
Новая
       15

родители и приложение не работают вместе?

2 голосов
/ 29 декабря 2011

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

поэтому, когда я нажимаю первую кнопку добавления . добавленный абзац должен быть добавлен только к первому элементу кнопки добавления первого, но не к другим родителям с таким же именем класса.

Вот тестовая страница .

Можно это исправить? Или я, должно быть, неправильно его кодировал?

Ответы [ 2 ]

3 голосов
/ 29 декабря 2011

.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)).

0 голосов
/ 29 декабря 2011

Попробуйте: 

$(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.Он устанавливает желтый цвет фона, а затем выбирает его дочерний элемент ul с классом items.Затем он добавляет новый элемент li.Тем временем мы также устанавливаем класс и текст li с помощью jQuery.

...