ebeveyn() jQuery'deki yöntem, verilen seçicinin doğrudan ebeveynini bulur. JQuery'de yerleşik bir işlevdir. Bu yöntem DOM ağacında yalnızca tek bir düzey yukarıya gider ve seçilen öğenin doğrudan üst öğesini döndürür.
ebeveyn() yöntem şuna benzer ebeveynler() yöntemi, her ikisi de DOM ağacına gidip ana öğeyi döndürdüğü için. Ama fark şu ki ebeveynler() yöntem DOM ağacında birden fazla seviye yukarıya doğru gider ve verilen seçicinin büyük ebeveyni, büyük büyük ebeveyni vb. dahil olmak üzere tüm atalarını döndürür. ebeveyn() yöntem tek bir seviye yukarıya gider ve yalnızca verilen seçicinin doğrudan ebeveynini döndürür.
Sözdizimi
$(selector).parent(filter)
seçici yukarıdaki sözdiziminde ebeveyni aranacak seçili öğeyi temsil eder. filtre Yukarıdaki sözdiziminde, aramayı daraltmak için kullanılan seçici ifadesini belirten isteğe bağlı parametre vardır.
Örnek 1
Bu örnekte isteğe bağlı parametreyi kullanmıyoruz. ebeveyn() yöntem. Burada, içeren bir div öğesi var. ul öğe, bir başlık h2 ve bir paragraf öğesi.
Biz uyguluyoruz ebeveyn() h2 başlığının ebeveynini arama yöntemi. Eğer kullanırsak ebeveynler() yöntemini kullanmak yerine ebeveyn() yönteminde, gövde öğesi de dahil olmak üzere h2 başlığının tüm ataları vurgulanacaktır.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 10px; margin: 17px; } function fun(){ $(document).ready(function(){ $('h2').parent().css({ 'font-size': '30px', 'color': 'blue', 'border': '6px dashed blue'}); }); } div <ul> ul <h2> Heading h2 <p> Paragraph element </p> </h2> </ul> click me Şimdi Test Edin Çıktı:
Yukarıdaki kodun yürütülmesinden sonra çıktı şu şekilde olacaktır:
Verilen butona tıkladıktan sonra çıktı şu şekilde olacaktır:
Örnek2
Bu örnekte isteğe bağlı parametreyi kullanıyoruz. ebeveyn() İlk paragraf öğesinin üst öğesini bulma yöntemi. Burada birden fazla paragraf elemanı var ancak ilk paragraf elemanının ebeveynini bulmamız gerekiyor. Yani sözde seçiciyi geçiyoruz ( :Birinci ) isteğe bağlı değeri olarak ebeveyn() yöntem.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent(':first').css({'color': 'blue', 'border': '3px dashed blue'}); }); } body div1 div2 <h2> h2 <p> Paragraph element </p> </h2> <h2> h2 <p> Paragraph element </p> </h2> click me Yukarıdaki kodun yürütülmesinden sonra çıktı şu şekilde olacaktır:
Verilen butona tıkladıktan sonra çıktı şu şekilde olacaktır:
çalışma hatası
Örnek3
Bu örnekte isteğe bağlı parametreyi kullanıyoruz. ebeveyn() Verilen seçicinin belirli ebeveynini bulma yöntemi. Burada farklı ebeveynlere sahip üç paragraf öğesi vardır. Biz buluyoruz h2 paragraf öğesinin ebeveyni. Yani aynı şeyi başarmak için şu aşamayı geçmeliyiz: h2 isteğe bağlı değer olarak ebeveyn() yöntem.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent('h2').css({'color': 'blue', 'border': '5px dashed blue'}); }); } body div1 div2 <p> Paragraph element </p> <h2> h2 <p> Paragraph element </p> </h2> <ul> ul <p> Paragraph element </p> </ul> click me Şimdi Test Edin Çıktı:
Yukarıdaki kodun yürütülmesinden sonra çıktı şu şekilde olacaktır:
Verilen butona tıkladıktan sonra çıktı şu şekilde olacaktır:
