JQuery kullanarak ikinci çocuk alın

$(t).html()

İadeler

<td>test1</td><td>test2</td>

Ben ikincisini almak istiyorum tdden $(t)nesne. Bir çözüm aradım ama hiçbir şey benim için işe yaramadı. İkinci elementin nasıl elde edileceği hakkında bir fikrin var mı?

ikinci çocuğu yakala:

$(t).children().eq(1);

veya ikinci çocuğu alın <td>:

$(t).children('td').eq(1);

Kodda okunması belki daha açık bir çözüm:

Sırasız bir listenin 2. çocuğunu almak için:

   $('ul:first-child').next()

Ve daha ayrıntılı bir örnek: Bu kod, UL'nin 2. alt öğesinin 'my_list' olarak tanımlanan 'title' özelliğinin metnini alır:

   $('ul#my_list:first-child').next().attr("title")

Bu ikinci örnekte, gereksiz olduğu için seçicinin başlangıcındaki 'ul'den kurtulabilirsiniz , çünkü bir kimlik tek bir sayfaya özgü olmalıdır. Sadece örneğe netlik katmak için var.

Performans ve Bellek ile ilgili not , bu iki örnek iyi performanslardır, çünkü jquery'yi daha sonra filtrelenmesi gereken ul öğelerinin bir listesini kaydetmezler .

Bu nasıl:

$(t).first().next()

BÜYÜK GÜNCELLEME:

Cevabın ne kadar güzel göründüğünün yanı sıra, kodun performansı hakkında da bir fikir vermelisiniz. Bu nedenle, $(t)değişkente tam olarak ne olduğunu bilmek de mantıklıdır . Bir dizi mi <TD>yoksa içinde <TR>birkaç tane olan bir düğüm <TD>smü? Konuyu daha fazla açıklamak için, <ul>50 <li>çocuklu bir listede jsPerf puanlarına bakın :

http://jsperf.com/second-child-selector

$(t).first().next()Yöntem farkla, burada hızlı olduğunu.

Ancak, diğer taraftan, <tr>düğümü alıp <td>çocukları bulup aynı testi çalıştırırsanız, sonuçlar aynı olmaz.

Umarım yardımcı olur. :)

Burada bahsedildiğini görmedim, ancak CSS özellik seçicilerini de kullanabilirsiniz. Dokümanlara bakın

$('#parentContainer td:nth-child(2)')

Bunu dene:

$("td:eq(1)", $(t))

veya

$("td", $(t)).eq(1)

JQuery yöntemlerini kullanmaya ek olarak, size veren yerel cellskoleksiyonu <tr>da kullanabilirsiniz.

$(t)[0].cells[1].innerHTML

tBir DOM öğesi olduğunu varsayarsak , jQuery nesne oluşturma işlemini atlayabilirsiniz.

t.cells[1].innerHTML

_{Kimsenin bunu yapmanın yerel JS yolundan bahsetmediğini görmek şaşırtıcı.}

JQuery olmadan:

Üst öğenin childrenözelliğine erişmeniz yeterlidir. Bir indeks ile erişilebilen canlı bir HTMLColection of children öğeleri döndürür . İkinci çocuğu almak istiyorsanız:

parentElement.children[1];

Sizin durumunuzda, böyle bir şey işe yarayabilir: (örnek)

var secondChild = document.querySelector('.parent').children[1];

console.log(secondChild); // <td>element two</td>

<table>
    <tr class="parent">
        <td>element one</td>
        <td>element two</td>
    </tr>
</table>

Ayrıca CSS3 seçicilerinin bir kombinasyonunu querySelector()kullanabilir ve kullanabilirsiniz :nth-of-type(). Bu yöntem bazı durumlarda daha iyi çalışabilir, çünkü bu durumda öğe türünü de belirtebilirsiniz td:nth-of-type(2) (örnek)

var secondChild = document.querySelector('.parent > td:nth-of-type(2)');

console.log(secondChild); // <td>element two</td>

Kullanım .find()yöntemi

$(t).find("td:eq(1)");

td:eq(x) // x is index of child you want to retrieve. eq(1) means equal to 1. //1 denote second element

JQuery'de aşağıdaki gibi iki yöntem kullanabilirsiniz.

JQuery: nth-child Selector öğesini kullanma Bir öğenin konumunu, ikinci li öğesini seçmek istediğiniz gibi 2 olan bağımsız değişkeni olarak koydunuz.

$( "ul li:nth-child(2)" ).click(function(){
  //do something
});

JQuery: eq () Seçici'yi kullanma

Tam öğeyi almak istiyorsanız, öğenin dizin değerini belirtmeniz gerekir. Bir liste elemanı bir indeks 0 ile başlar. Li'nin 2. elemanını seçmek için argüman olarak 2'yi kullanmanız gerekir.

$( "ul li:eq(1)" ).click(function(){
  //do something
});

Örneğe bakın: jQuery'deki Listenin İkinci Alt Öğesini Alın