El contexto del selector jQuery no coincide con el elemento externo

Question

En el siguiente fragmento, ¿por qué la longitud es 0 cuando debería ser 1?

var jQueryObj = $("<p>testing</p>"); 
 
// Display the length 
 
$('body').html($("p", jQueryObj).length);

<script src="http://code.jquery.com/jquery-2.2.0.js"></script>

Answer 1

Al proporcionar el contexto, le está diciendo jQuery para encontrar el elemento p dentro de ese contexto, por lo que su selector de mirará para cualquier etiqueta p que sea un elemento secundario del contexto.

Si agrega un contenedor al contexto, podrá encontrar ese elemento.

var jQueryObj = $("<div><p>testing</p></div>"); 
 
// Display the length 
 
$('body').html($("p", jQueryObj).length);

<script src="http://code.jquery.com/jquery-2.2.0.js"></script>

Answer 2

Cuando se pasa un contexto de jQuery, que es equivalente a usar el método find, que mira a los elementos descendientes. Desde el jQuery docs:

Internamente, el contexto de selección se lleva a cabo con el método .find(), por lo que $ ('período', esto) es equivalente a $ (this) .find ('período').

Su elemento p no es un descendiente, por lo que tendría que usar filter:

jQueryObj.filter("p"); 

El método filter reduce el conjunto combinado de elementos a los que coinciden con el selector (o pasar una prueba definida por una función). En su caso, el conjunto de elementos coincidentes contiene un elemento (el p), que coincidirá con el selector.

Answer 3

Simplemente no hay elemento <p> dentro de usted jQueryObj.

El uso de jQueryObj como contexto limitará la búsqueda del selector proporcionado al contexto. Es lo mismo que escribir:

jQueryObj.find('p'); 

Internamente, jQuery utiliza realmente .find() cuando se utiliza la sintaxis $(selector, context), como se indica en el documento:

Internamente, el contexto de selección se lleva a cabo con el Método .find(), por lo que $ ('span', this) es equivalente a $ (this) .find ('span').

Más información:

• jQuery()
• .find()

Answer 4

Usted busca: <p> dentro de su original, <p> (jQueryObj ya representa una etiqueta <p>).

Como no hay elemento <p> dentro de su elemento original <p>, su búsqueda no arroja ningún resultado.