Как выбрать родителя элемента и родительских братьев и сестер

Ответ 1

Вы хотите использовать addBack() в этом случае:

$("#test").siblings('p').addBack().remove();

ИЗМЕНИТЬ

Во-первых, для будущих посетителей, если вы используете jQuery версии 1.8-, вам, вероятно, нужно будет использовать andSelf(), который является предшественником addBack() для проблем совместимости.

Во-вторых, оба end и addBack будут выполнять одну и ту же задачу в этом случае, но они фактически разные. Взгляните на этот HTML:

<div class="grandpa">
    <div class="dad">
        <div class="son">
            Test
        </div>
    </div>
</div>

Если мы используем end():

$('.grandpa')
    .find('.dad')
        .find('.son')
        .addClass('youngster')
        .end()
    .addClass('adult')
    .end()
.addClass('oldster');

Результат будет выглядеть следующим образом:

<div class="grandpa oldster">
    <div class="dad adult">
        <div class="son youngster">
            Test
        </div>
    </div>
</div>  

Поэтому, когда мы используем end() для son, мы сообщаем jQuery, что ему нужно вернуться с son к родительскому набору, который является dad, и добавить класс adult.

Но когда мы используем addBack:

$('.grandpa')
    .find('.dad')
        .find('.son')
        .addClass('youngster')
        .addBack()
        .addClass('adult')
        .addBack() // This simply do nothing since `addBack` is not traverse up DOM element 
        .addClass('oldster');    

что приведет к следующему:

<div class="grandpa">
    <div class="dad adult oldster">
        <div class="son youngster adult oldster">
            Test
        </div>
    </div>
</div>

Поэтому, когда мы вызываем addBack на son, мы сообщаем jQuery, чтобы нажать dad и son в одну комнату и добавить к ним оба класса class adult и oldster.

Ответ 2

Метод end() полезен, прежде всего, при использовании свойств цепочки jQuery. Если вы не используете цепочку, мы обычно можем просто вызвать предыдущее object по имени переменной, поэтому нам не нужно манипулировать стеком.

Новый набор элементов помещается в стек, который поддерживается внутри object. Каждый последующий метод фильтрации подталкивает новый набор элементов в стек. Если нам нужен более старый набор элементов, мы можем использовать end(), чтобы вытащить множества обратно из стека.

Я предполагаю использовать .end() следующим образом:

$("#test").siblings('p').remove().end().remove();

Вы можете найти скрипт

Некоторое объяснение:

Теперь, что происходит с этим фрагментом кода выше:

Предположим, что эта разметка HTML:

<div id='container'>
   <div id='test'>This is supposed to be removed.</div>
   <p>And this to be removed too.</p>
</div>

когда script выполняет:

$("#test").siblings('p').remove()

этот блок удаляет элемент sibling <p> из представления, затем разметка будет обновляться следующим образом:

<div id='container'>
   <div id='test'>This is supposed to be removed.</div>
</div>

и если мы привяжем его к .end()

$("#test").siblings('p').remove().end()

он возвращается в стек в #test div, после чего следующая часть script запускается

$("#test").siblings('p').remove().end().remove();
                             //--^^^^^^^^^^^^^^^----this next part

и #test удаляются из представления, и ваш окончательный вывод разметки будет выглядеть следующим образом:

<div id='container'>
</div>

Ответ 3

Может быть, вне темы.. вы можете изменить представление проблемы:

$("#test, #test ~ p").remove(); // !! incorrect way, see comment below

Ребята извините:( мое решение неверно!!

Селектор ~ 'не равен' sibling '- метод. ' ~' выбирает все элементы sibling p ', которые следуют за ПОСЛЕ элемента #test.

Поэтому я предлагаю другое решение:

$("#test, > p", $('#test').parent()).remove();

Это не очень элегантный, но самый быстрый способ. Пожалуйста, проверьте его http://jsperf.com/how-to-chain-this-code-stackoverflow-16009101 '

Результат теста производительности:

PS http://jsfiddle.net/Dpe59/

Ответ 4

Я должен согласиться с комментарием по этому вопросу; для удобства чтения и обслуживания, andSelf:

$("#test").siblings('p').andSelf().remove();

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

Ответ 5

$("#text").siblings('p').remove().prevObject.remove();

изменить Хотя это работает, не делайте этого. как говорит Мэтт, prevObject недокументирован

Ответ 6

$("#test").siblings("p").siblings("#test").remove();

Ответ 7

Попробуйте следующее:

$("#test").siblings('p').addBack().remove();