Использование селектора jQuery NOT для исключения элементов с определенными дочерними элементами.

У меня есть функция, которая добавляет некоторый HTML к элементу. Его можно вызвать более одного раза, поэтому я хочу, чтобы он добавлял HTML к элементам, которые еще не добавили HTML.

Пример:

<div class="divToAppendTo"></div>
<div class="divToAppendTo"><span class="myAppendedMarkup"></span></div>

Как таковой, я хотел бы выбрать все .divToAppendTo, у которых нет непосредственного дочернего элемента .myAppendedMarkup

Мой удар в нем, похоже, не работает:

$(".divToAppendTo:not(>span.myAppendedMarkup)")

Он всегда добавляется, когда я его вызываю (тем самым дублируя содержимое).

Ответы

Ответ 1

попробуйте

$("div.divToAppendTo:not(:has(span.myAppendedMarkup))")

или

$("div.divToAppendTo").filter(function() { 
    return $(this).children('span.myAppendedMarkup').length == 0;  
});

Ответ 2

Если вы не против, я думаю, что у меня может быть более легкое решение для того, что вы пытаетесь сделать.

Всякий раз, когда вы добавляете HTML к .divToAppendTo, делайте a $(this).removeClass("divToAppendTo"); таким образом вам просто нужно выбрать .divToAppendTo, будучи уверенным, что к нему не добавлен какой-либо код.

Если вы используете этот класс для чего-то другого, вы всегда можете использовать другой для этого.

Ответ 3

Вы можете сделать:

$(".divToAppendTo:not(:has(span.myAppendedMarkup))");

Ответ 4

Мне нравится это для его удобочитаемости, и это сопоставимо по эффективности с самым быстрым предложением в других ответах.

var completeSet = $( "div.divToAppendTo" );
var unwantedSet = completeSet.has( "span.myAppendedMarkup" );    
var wantedSet   = completeSet.not(unwantedSet);

Ответ 5

Если вам не нужно оставлять имя класса на месте, отправьте ответ на Soufiane, иначе это должно работать:

$('div.divToAppendTo').filter(function() {
    return $(this).html() == '';
}) );

Или, если вы ожидаете какой-либо другой HTML-код в .divToAppendTo, используйте это:

$("div.divToAppendTo").filter(function() { 
    return $(this).children('span.myAppendedMarkup').length == 0;  
});