Игнорировать дочерние элементы при выборе элементов в jQuery

Question

вот мой HTML:

<div class="foo">
    <span class="ignore_this">IGNORE THIS TEXT</span>
    SELECT THIS
</div>

Я пытаюсь выяснить, как выделить все вещи внутри foo, но не вещи внутри ignore_this:

$("div.foo:not(span.ignore_this)").text()

но я не могу понять, как.

Answer 1

Селектор div.foo:not(span.ignore_this) говорит, что "соответствует каждому div.foo, который не является span.ignore_this", который будет выбирать только один элемент: div.foo. Если вы реструктурировали свой HTML следующим образом:

<div class="foo">
    <span class="ignore_this">IGNORE THIS TEXT</span>
    <span>SELECT THIS</span>
</div>

Тогда вы можете позвонить:

$('div.foo span:not(.ignore_this)').text();

Что соответствует всем span элементам, которые являются потомками div.foo, которые не .ignore_this.

Если у вас нет такой роскоши, как переформатировать html, вы можете выполнить то, что вы хотите, с помощью дополнительных циклов процессора:

var clone = $('div.foo').clone();
$('span.ignore_this', clone).remove();
var text = clone.text();