ej.: dada una porción de instalaciones en una página, y contiene diferentes instalaciones disponibles en diferentes ul en forma de columna (así como la ul de la columna 1 contiene varias instalaciones en forma de elemento de lista (li)). entonces quiero acceder a la segunda ul (imagine la segunda columna de una tabla) y solo a sus elementos de lista 4 y 5 (li).
si hago esto, document.querySelector(".text-body li") entonces obtendré datos solo del 1er ul, pero los quiero del segundo.
aquí .text-body es la clase y es lo mismo para cada lista.
<div class="text-block hospital-facility" id="section-facilities"> <h2 class="text-block-title"></h2> <div class="facility-list"› <h4 class="text-block-list-title">Comfort During Stay</h4> <div class="text-body add-view-more" data-visible-item="6" data- showmore-text="More Details"> <ul>...</ul> <p class="text-right vm-wrp"></p> </div> </div> <div class="facility-list> <h4 class="text-block-list-title">Money Matters</h4> <div class="text-body"> <u1> <li>Health insurance coordination</li> <li>Medical travel insurance</li> <li>Foreign currency exchange</li> <li>ATM</li> <li>Credit Card< li> </ul>en el código anterior, el segundo ul contiene varios métodos de pago, los necesito todos. podemos hacer ul:last-child pero hay alrededor de 6-7 etiquetas ul, por lo que debemos tener algo que seleccione solo la segunda ul
Así que supongo que tu html se parece a esto:
<div id="ulParent"> <ul> <li>li11</li> <li>li12</li> </ul> <ul> <li>li21</li> <li>li22</li> </ul> </div>Entonces puedes hacer:
var secondUl = document.querySelector("#ulParent ul:nth-child(2)"); var fourthLi = secondUl.querySelector("li:nth-child(4)"); var fifthLi = secondUl.querySelector("li:nth-child(5)");Actualización después de que OP agregó un ejemplo de HTML:
Así que con el siguiente HTML :
<div class="text-block hospital-facility" id="section-facilities"> <h2 class="text-block-title"></h2> <div class="facility-list"> <h4 class="text-block-list-title">Comfort During Stay</h4> <div class="text-body add-view-more" data-visible-item="6" data-showmore-text="More Details"> <ul><li>...</li></ul> <p class="text-right vm-wrp"></p> </div> </div> <div class="facility-list"> <h4 class="text-block-list-title">Money Matters</h4> <div class="text-body"> <ul> <li>Health insurance coordination</li> <li>Medical travel insurance</li> <li>Foreign currency exchange</li> <li>ATM</li> <li>Credit Card</li> </ul> </div> </div> </div> El ul no es el segundo hijo de su padre, por lo que no puede usar :nth-child(2) .
En su lugar, necesita la primera ul de la segunda .facility-list :
var targetUl = document.querySelector("#section-facilities .facility-list:nth-of-type(2) ul"); // then retrieve the `li`s as the previous example shows: var fourthLi = targetUl.querySelector("li:nth-child(4)"); var fifthLi = targetUl.querySelector("li:nth-child(5)"); Tenga en cuenta que también puede obtener su targetUl usando xpath:
var targetUl = $x("//h4[contains(text(), 'Money Matters')]//following-sibling::div//ul");