jQuery có được anh chị em ruột cho phần tử này chỉ

Question

Tôi không thể tìm ra cách viết này.

Xem cấu trúc đánh dấu của tôi, được lặp lại nhiều lần trên một trang.

<div class="module">  
    <div class="archive-info"> 
     <span class="archive-meta"> 
      open 
     </span>       
    </div> 
    <div class="archive-meta-slide"> 
    </div>        
</div> 

Như bạn có thể nhìn thấy bên trong của tôi mark-up, tôi có một <span> đó là tôi $metaButton - khi điều này được nhấn vào, nó chạy các hình ảnh động trên div.archive-meta-slide - điều này là đủ đơn giản, nhưng tôi đang cố gắng để chạy các hình ảnh động chỉ vào hiện tại div.module nó sinh động tất cả các divs với lớp "archive-meta-slide", và tôi thực sự đấu tranh để animate chỉ hiện div.archive-meta-slide sử dụng this

nó sẽ được dễ dàng nếu div.archive-meta-slide là bên trong div mẹ của $metaButton nhưng vì nó nằm ngoài div cha này, tôi có thể ' t có quyền vượt qua.

Xem kịch bản của tôi

var $metaButton = $("span.archive-meta"), 
    $metaSlide = $(".archive-meta-slide"); 

$metaButton.toggle(
function() { 
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "0" }, 300); 
    $(this).parent().siblings().find(".archive-meta-slide").html("close"); 
}, 
function() { 
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "43px" }, 300); 
    $(this).parent().siblings().find(".archive-meta-slide").html("open"); 
}); 

bất cứ ai có thể giúp đỡ?

Cảm ơn Josh

Answer 1

$(this).parent().siblings().find(".archive-meta-slide") 

Đây là thực sự gần. Điều này thực sự nói "tìm các phần tử với lớp archive-meta-slide là hậu duệ của anh chị em của cha mẹ của phần tử này". Bạn muốn nói "tìm các phần tử có lớp archive-meta-slide rằng là anh chị em của cha mẹ của phần tử này". Cho rằng, sử dụng một selector trên siblings gọi:

$(this).parent().siblings(".archive-meta-slide") 

Lưu ý rằng, nếu đánh dấu luôn là cấu trúc này, bạn thậm chí có thể làm $(this).parent().next().

Xem API jQuery:

• siblings
• find
• next

Answer 2

Sử dụng

$(this).parent().parent().children('.archive-meta-slide') 

Đây là tốt như tìm kiếm tr en top div mô-đun

$ (này) .parent(). mẹ()

sẽ hàng đầu của bạn

<div class="module"> 

Answer 3

Sử dụng $(this).closest(".module") để tìm các module mẹ từ nơi nhấp vào xảy ra.

Bạn cũng có thể muốn sử dụng hàm hoàn thành để thay đổi văn bản sau khi bạn thực hiện hoạt ảnh.

Điều tốt đẹp về .closest() là nó chỉ tìm kiếm chuỗi gốc cho đến khi cần thiết cho đến khi tìm thấy đối tượng với lớp phù hợp. Điều này ít dễ vỡ hơn việc sử dụng một số tài liệu tham khảo .parent() cụ thể nếu ai đó thay đổi thiết kế HTML của bạn một chút (thêm một div hoặc span khác hoặc thứ gì đó tương tự như vậy trong chuỗi gốc).

var $metaButton = $("span.archive-meta"); 

$metaButton.toggle(
    function() { 
     var $slide = $(this).closest(".module").find(".archive-meta-slide"); 
     $slide.animate({ height: "0" }, 300, function() { 
      $slide.html("close"); 
     }); 
    }, 
    function() { 
     var $slide = $(this).closest(".module").find(".archive-meta-slide"); 
     $slide.animate({ height: "43px" }, 300, function() { 
      $slide.html("open"); 
     }); 
    }, 
}); 

Bạn cũng có thể KHÔ nó lên một chút và thực hiện một chức năng chung:

function metaToggleCommon(obj, height, text) { 
    var $slide = $(obj).closest(".module").find(".archive-meta-slide"); 
    $slide.animate({ height: height}, 300, function() { 
     $slide.html(text); 
    }); 
} 

var $metaButton = $("span.archive-meta"); 
$metaButton.toggle(
    function() {metaToggleCommon(this, "0", "close")}, 
    function() {metaToggleCommon(this, "43px", "open")} 
); 

Answer 4

Thử closest mà sẽ cho phép bạn quay trở lại cho đến khi bạn đạt được phụ huynh với bộ chọn định.

$(this).closest(".module") 

Answer 5

Bạn đang tìm kiếm ...

$(this).parent().next('.archive-meta-slide') 

Nếu cấu trúc của những thay đổi #module, điều này có thể mạnh mẽ hơn:

$(this).closest('#module').children('.archive-meta-slide') 

Answer 6

Sử dụng

jQuery(this).closest('.prev-class-name').find('.classname').first()