2011-03-15 25 views
16

JQuery'de zincire geri gitmene izin veren bir şey olduğunu düşündüm.Jquery'yi kullanarak bir zincirden geriye doğru nasıl geçersiniz?

ben bunu yapmak istiyorum:

var a = $(this).parent().addClass('test').goBackToParent().children('selectorHere').text() 

Ben var nesnenin üst almak ve buna bir sınıf adını eklemek istiyorum. Bunu yaptıktan sonra çocuklarından geçmek ve seçmenimle eşleşen bir çocuk bulup metnini almak istiyorum.

Bunu, yoksa onun yerine bunu yapmak zorunda yapabilir:

$(this).parent().addClass('test'); 
var a = $(this).parent().children('selectorHere').text() 

Edit Ben diğerlerine ibret şimdi "son" ama çalışmıyor kullanıyorum

size Bkz here

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
</style> 
</head> 
<body> 
    <table> 
    <th> 
     <tr>one</tr> 
     <tr>two</tr> 
    </th> 
    <tr> 
     <td id="test"><a href="#"><img src="http://ais.web.cern.ch/ais/apps/hrt/SMT%20v2/Images/btnbar_edit.png" /></a></td> 
     <td class="selectMe">1</td> 
    </tr> 
    </table> 
</body> 
</html> 


$(function() 
    { 
     $('#test').click(function() 
         { 
          // does not work 
          var a = $(this).parent().addClass('afb').end().children('.selectMe').text(); 
          // works 
          var b = $(this).parent().children('.selectMe').text(); 
         alert(a + ' -should have value'); 
          alert(b + ' -works'); 
         return false; 
         }); 
    }); 

cevap

28

Sen end() yöntemle aradığınız:

var a = $(this).parent().addClass('test').end() 
       .children('selectorHere').text(); 

yöntemi:

akım zincirinde en son filtreleme operasyonu bitiyor ve eşleşti elemanların kümesi döndürür Önceki durumuna .

Güncelleme: html pasajı dayalı, aslında hiç de end gerek yok! JQuery ile ilgili önemli olan, çapraz olmayan yöntemlerin çoğunun kendilerine ait bir kopyasını döndürmesidir - bu yüzden eğer $ (this) .addClass ('test') olarak adlandırırsanız, $ (this) geri bir kopyasını alırsınız. Yani snippet'la

:

// does not work 
var a = $(this)      // points at #test 
      .parent()     // now refers to the tr which holds test 
       .addClass('afb')  // still refers to the tr 
       .end()     // now we're back to #test 
      .children('.selectMe')  // empty! there are no direct children of #test which match .selectMe 
       .text();    // empty 

Bunun yerine, sonu olmayan denemek:

// works 
var a = $(this)      // points at #test 
      .parent()     // now refers to the tr which holds test 
       .addClass('afb')  // still refers to the tr 
      .children('.selectMe')  // found the .selectMe td 
       .text();    // returns '1' 
+0

Garip Böyle yapınca artık metin için bir değer elde değil. Eğer addClass'a binersem ve bitirirsem. – chobo2

+0

Bir html snippet'i gönderebilmeniz için, tam olarak neyi değiştirmeye çalıştığınızı tam olarak bildiğimiz takdirde yardımcı olur. Yorumunuza göre, 'selectorHere' elemanı aslında bir ebeveyn (örneğin bir kardeş veya $ (this)), bir çocuk (bu) – Dexter

+0

sadece bir örnek eklenmiş bir çocuk doğrudan olduğu gibi geliyor. – chobo2

7

end() yöntemini arıyorsunuz. Sadece goBackToParent() yerine kullanın.

jQuery nesne örneği ameliyat ve DOM elemanları farklı bir dizi eşleşen yeni bir üretilmesi jQuery'nin DOM kastetmek yöntemlerin çoğu. Bu olduğunda, yeni set öğelerinin, nesnenin içinde tutulan bir yığın üzerine itilmiş gibi olur. Her bir ardışık filtreleme yöntemi , yığınının üzerine yeni bir öğe kümesini iter. eski bir öğeye ihtiyacımız varsa, kümeyi kümesinin arkasından çıkarmak için end() öğesini kullanabiliriz.

İlgili konular