Mustafa Çağatay KIZILTAN

9. Jquery Traversing işlemleri

1. PARENT TRAVERSING

Jquery’de parent traversing  ile etiketlerin parentlarına ulaşabiliriz.

.parent()    : etiketin bir üst ebeveynini verir.
.parents() : etiketin üst ebeveynlerini verir.
.parentsuntil(“div”) : div’e kadar olan ebeveynlerini verir.


<script>
  $(document).ready(function(){
   
   $("span").parent().css({"color": "red", "border": "2px solid red"});  //li etiketini döner.

   $("span").parents().css({"color": "red", "border": "2px solid red"}); //li,ul,div,div etiketlerini döner.
 
   $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"}); //div'e kadar olan dış parentleri döner.
  });

</script>

<div class="ancestors">
   <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent) 
      <li>li (direct parent)
        <span>span</span>
     </li>
    </ul> 
  </div>

2. CHILDREN TRAVERSING

Jquery’de parent traversing  ile etiketlerin çocuklarına ulaşabiliriz.

<script>
 $(document).ready(function(){
  $("div").children().css({"color": "red", "border": "2px solid red"});  //div'in childini verir torununu vermez. Sadece ilkini istiyorsak parametre olarak p.IdIsmini parametre olarak gönderebiliriz.
 });
 </script>

<div class="descendants" style="width:500px;">div (current element) 
  <p>p (child)
  <span>span (grandchild)</span> 
  </p>
  <p>p (child)
  <span>span (grandchild)</span>
  </p> 
 </div>

3. SIBLING TRAVERSING

Jquery’de parent traversing  ile etiketlerin kardeşlerine de ulaşabiliriz.

  • .siblings()  : bir etiketin tüm kardeşlerini döndürür.
  • .next()  : bir etiketin bir alt kardeşini döndürür.
  • .nextAll() : bir etiketin tüm alt kardeşlerini döndürür.
  • .nextUntil(“x”) : bir elementin parametre olarak verilen x’e kadarki tüm elementlerini döndürür.
  • .prev()  : etiketin bir önceki kardeşini döndürür.
  • .prevAll() : etiketin gerisindeki tüm kardeşlerini döndürür.
  • .prevUntil(“x”) : etiketin gerisindeki x elementine kadarki tüm kardeşlerini döndürür.
<script>
 $(document).ready(function(){
   $("h2").siblings().css({"color": "red", "border": "2px solid red"});   // p span h3 p  etiketlerini döner.
    $("h2").siblings("p").css({"color": "red", "border": "2px solid red"}); // p etiketini döner.
  });
</script>

 <div>div (parent)
   <p>p</p>
   <span>span</span>
   <h2>h2</h2>
   <h3>h3</h3>
   <p>p </p>
 </div>

4. FILTER TRAVERSING

  Jquery’de filter traversing  ile belirli sıra isim ve numaraları vererek de etiketlere ulaşabiliriz.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       <script>
               $(document).ready(function(){
                   $("div").first().css("background-color", "yellow");  //bulunan divlerden ilkini verir.
                   $("div").last().css("background-color", "red");      //bulunan divlerden sonuncusunu verir.
                   $("div").eq(2).css("background-color", "yellow");    // ikinci divi seç
                  //filter() ve not() metotlarıyla traversing işlemi çoğaltılabilir.

                        });
          </script>
  </head>
   <body>

         <h1>Welcome to My Homepage</h1>

          <p>This is a paragraph.</p>

          <div style="border: 1px solid black;">
                 <p>A paragraph in a div.</p>
                 <p>Another paragraph in a div.</p>
           </div>
            <br>

            <div style="border: 1px solid black;">
                 <p>A paragraph in another div.</p>
                 <p>Another paragraph in another div.</p>
            </div>
            <br>

           <div style="border: 1px solid black;">
                 <p>A paragraph in another div.</p>
                 <p>Another paragraph in another div.</p>
           </div>

   </body>
   </html>

 

5. FIND METODU

Jquery’de find metodu ile etiketlerin soyları içerisinde özel etiket araması da yapabiliriz.

<script>
$(document).ready(function(){
 $("div").find("p").css({"color": "red", "border": "2px solid red"});
});
</script>