index - Cómo obtener el elemento nth jQuery
nth-child jquery (11)
Ejemplo vivo para acceder y eliminar el elemento Nth con jQuery:
<html>
<head></head>
<body>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(''li:eq(1)'').hide();
});
</script>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
Cuando se ejecuta, hay dos elementos en la lista ordenada que muestran, Primero y Tercero. El segundo estaba oculto.
En jQuery, $("...").get(3)
devuelve el tercer elemento DOM. ¿Cuál es la función para devolver el tercer elemento jQuery?
¿Por qué no navegar primero en la página de (selectores)?
Aquí está: el operador :eq()
. Se usa como get()
, pero devuelve el objeto jQuery.
O puedes usar la función .eq()
también.
.eq () -Un entero que indica la posición basada en 0 del elemento.
Ex:
Considere una página con una lista simple en ella:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
Podemos aplicar este método al conjunto de elementos de la lista:
$( "li" ).eq( 2 ).css( "background-color", "red" );
Creo que puedes usar esto
$("ul li:nth-child(2)").append("<span> - 2nd!</span>");
Encuentra el segundo li en cada ul emparejado y lo anota.
Para las iteraciones que usan un selector no parece tener ningún sentido, sin embargo:
var some = $( ''...'' );
for( i = some.length -1; i>=0; --i )
{
// Have to transform in a jquery object again:
//
var item = $( some[ i ] );
// use item at will
// ...
}
Puede utilizar el selector :eq , por ejemplo:
$("td:eq(2)").css("color", "red"); // gets the third td element
O la función Traversing/eq :
$("td").eq(2).css("color", "red");
Además, recuerde que los índices se basan en cero.
Si desea obtener un elemento / nodo o etiqueta particular en un bucle para, por ejemplo,
<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>
Por lo tanto, desde el bucle de código anterior se ejecuta y queremos que se seleccione un campo particular para el que tenemos que usar la selección de jQuery que puede seleccionar solo el elemento esperado del bucle anterior, por lo que el código será
$(''.weekdays:eq(n)'');
p.ej
$(''.weekdays:eq(0)'');
así como por otro método
$(''.weekday'').find(''p'').first(''.weekdays'').next()/last()/prev();
pero el primer método es más eficiente cuando HTML <tag>
tiene un nombre de clase único.
NOTA: El segundo método se usa cuando no hay un nombre de clase en el elemento o nodo de destino.
Para más información, siga https://api.jquery.com/eq/
Si entiendo su pregunta correctamente, siempre puede envolver la función de obtener así:
var $someJqueryEl = $($(''.myJqueryEls'').get(3));
Si tiene control sobre la consulta que genera el objeto jQuery, use :eq()
$("div:eq(2)")
Si no tiene control sobre él (por ejemplo, se está pasando de otra función o algo), entonces use .eq()
var $thirdElement = $jqObj.eq(2);
O si quieres una sección de ellos (por ejemplo, los elementos tercero, cuarto y quinto), usa .slice()
var $third4th5thElements = $jqObj.slice(2, 5);
Si ya tiene el objeto jquery en una variable, también puede tratarlo como una matriz indexada normal, sin el uso de jquery:
var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
var row = all_rows[i];
//additionally, you can use it again in a jquery selector
$(row).css("background-color","black");
}
Aunque el ejemplo anterior no es útil de ninguna manera, representa cómo se pueden tratar los objetos creados por jquery como matrices indexadas.
$(function(){
$(document).find(''div'').siblings().each(function(){
var obj = $(this);
obj.find(''div'').each(function(){
var obj1 = $(this);
if(!obj1.children().length > 0){
alert(obj1.html());
}
});
});
});
<div id="2">
<div>
<div>
<div>XYZ Pvt. Ltd.</div>
</div>
</div>
</div>
<div id="3">
<div>
<div>
<div>ABC Pvt Ltd.</div>
</div>
</div>
</div>