Considere el siguiente marcado:
<div class="body"> <p>...<p> <p>...<p> <blockquote> <p>...<p> </blockquote> <p>...<p> <p>...<p> </div> Quiero seleccionar el primer elemento <p> . Puedo hacer esto con:
$( ".body p:nth-child(1)Sin embargo, si quisiera seleccionar la tercera
(excluyendo la cita en bloque) esto no funcionará:
$( ".body p:nth-child(3)Intenté usar nth-type, pero si lo hago:
$( ".body p:nth-of-type(1)Se seleccionará el primero.
en el cuerpo y también la siguiente p en bloque de comillas.
Necesito poder excluir o ignorar la cita en bloque. ¿Funcionaría si leo el dom en una variable y elimino la cita en bloque antes de llamar a nth-child?
Dado que está utilizando jQuery, que devuelve una matriz de elementos, puede evitar las peculiaridades de las reglas CSS nth-... Todo lo que realmente necesita es un selector que solo seleccione los elementos que desea.
por ejemplo, .body > p que solo coincide con los hijos directos de la clase de cuerpo
luego seleccione el tercer elemento usando .eq(2) de jQuery (está indexado a 0, por lo que 2 es el tercer elemento coincidente)
$(document).ready(function() { $(".body > p").eq(2).text("New text") }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <p>1</p> <p>2</p> <blockquote> <p>3</p> </blockquote> <p>4</p> <p>5</p> </div>Si solo desea obtener el hijo directo enésimo de un elemento con una etiqueta específica (no funciona con nombres de clase, identificadores, etc.), puede usar :nth-of-type . Ejemplo:
$(".body p:nth-of-type(3)")[0].textContent = "Here"; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <p>...</p> <p>...</p> <blockquote> <p>...</p> </blockquote> <p>...</p> <p>...</p> </div>Desafortunadamente, aún no puede obtener el elemento n que especifica una determinada condición con selectores css puros, sin embargo, podría obtener el tercer elemento de la matriz. Ejemplo:
$(".body p")[2].textContent = "Changed Overall 3rd"; $(".body>p")[2].textContent = "Changed Direct 3rd"; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <p>...</p> <p>...</p> <blockquote> <p>...</p> </blockquote> <p>...</p> <p>...</p> </div>