Usando jQuery NOT selector para excluir elementos con niños en particular.

Question

Tengo una función que agrega algo de HTML a un elemento. Se puede llamar más de una vez, por lo que solo quiero que añada el HTML a elementos que aún no hayan agregado el HTML.

Ejemplo:

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

Como tal, me gustaría seleccionar todo .divToAppendTo que no tienen un hijo inmediato de .myAppendedMarkup

Mi puñalada en ella no parece funcionar :

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

Siempre se agrega cuando lo llamo (lo que duplica el contenido).

Answer 1

tratar

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

o

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

Answer 2

Si no te importa, creo que puedo tener una solución más fácil para lo que estás tratando de hacer.

Siempre que anexar HTML a un .divToAppendTo hacer un $(this).removeClass("divToAppendTo"); esta manera que sólo tendrá que seleccionar .divToAppendTo estando seguro de que no tiene ningún código añadido a la misma.

Si utiliza esta clase para otra cosa, siempre se puede utilizar otro para hacer esto.

Answer 3

se puede hacer:

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

Answer 4

Si no es necesario dejar el className en su lugar ir para la respuesta de Soufiane, de lo contrario esto debería funcionar:

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

O si espera algún otro HTML en los .divToAppendTo 's, a continuación, utilizar esto:

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

Answer 5

me gusta esto para su legibilidad, y es comparable en eficacia a la sugerencia más rápido en otras respuestas.

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