JQuery'de bir HTML öğesinin alt öğesini nasıl bulunur

HTML öğeleri, başlıklar, tablolar, resimler ve paragraflar gibi bir web sayfasının herhangi bir bölümünü içerir. HTML değişkenlerini birbirinin içine girdiğinizde, ebeveyn ve alt öğeler oluşturursunuz. Üst eleman babadır, tüm iç içe geçmiş elemanlar çocuk olurlar. JQuery'de, "children ()" işlevini (ingilizce, oğlu) kullanarak bir öğenin alt öğelerini alabilirsiniz, ancak işlev oluşturan değerlerin dizisini gözden geçirmelisiniz.

Kodunuzun jQuery'de komut dosyasını gerçekleştirmeye çalışmadan önce jQuery kitaplığına bir başvuru içerdiğini kontrol edin. Referansı görmüyorsanız, bu kodu web sayfanızın "" değişkenleri (başlık) içinde ekleyin:

JQuery kitaplığı başvurusunun altında birkaç komut dosyası değişkeni ekleyin ve sayfanın yüklenip yüklenmediğini kontrol etmek için bir işlev yazın. Tüm betikleriniz bu işlevin anahtarları arasında olmalıdır:

$ (işlev () {});

Çocuk elemanlarının bir listesini almak için ihtiyacınız olan HTML öğesini seçin. Örneğin, çocukları sıralanmamış bir listeden almak istiyorsanız, "ul" öğesini seçin. Çocuğu edinmek için seçiciyi "children ()" işleviyle ekleyin:

$ ('ul.level-2'). çocuklar ();

Önceki örnek, "level-2" sınıf adı olan sırasız listeyi seçecektir. Bununla birlikte, "children ()" birden fazla alt öğe bulduğunda, bir dizi değer oluşturur. Bir matrisi işlemek için özel kodlara ihtiyacınız olacak.

Alt öğe öğelerinin dizisini geçmek için "her ()" ile "her ())" alt öğe () "ekleyin. Bir döngü yapısı olduğundan, bir sayaç değişkeni gerekir, ancak jQuery'de önceden oluşturmamalısınız. Sayacınızı almak için her "()" 'de bir argüman olarak "i" yazın:

$ ('ul.level-2'). children (). each (function (i) {});

Her alt öğenin metin değerini koruyacak bir değişken bildirin. Öğelerin diğer değerlerini alabilirsiniz, ancak metin çocuğun içinde bulunan herhangi bir metni döndürecek ve veri elde etmek için yararlı olacaktır. "Her ()" işlevinin çalışmakta olduğu geçerli öğeyi almak için değişkeni "$ (this)" (this) olarak ayarlayın. "$ (This)" değerini "text ()" (text) ile birlikte metin:

var childEl = $ (this) .text ();

Bir öğeyi seçerek ve "append ()" (ek) ekleyerek sayfanızdaki değerleri düzenleyin; böylece "each ()" işlevi bulduğu değerleri eklemeye devam edebilir:

$ ('div'). Ekle (i + ":" + childEl + "");

Bu örnekte, "childEl" bir dizi değişken için "" verilir. Her zaman jQuery, "her ()" içindeki kodları tekrarlar, sayıyı "i" den verir, noktalı virgül çifti ekler, "childEl" değerini verir ve satırı bir komut dosyası değişkeni ile sonlandırır.

Son komut dosyanız şöyle görünmelidir:

$ (function () {$ ('ul.level-2'). children (). each (function (i) {var childEl = $ (this) .html (); $ ('div'). + ":" + childEl + "");});});

konsey

"Line.log (childEl);" her bir işlevin içinde ", son satırdaki her bir ()" ekleyin. Hata ayıklama sırasında bir konsoldaki değerleri kontrol etmek için Firefox'ta Firebug veya Google Chrome'daki JavaScript Console'u kullanın.

Alt öğelerin HTML kodunu almak için "html ()" ile "text ()" değerini değiştirin.