jQuery獲得父元素只有這個元素的兄弟

查看我的標記結構，它在頁面上重複多次。

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

正如你可以在我的加價看，我有一個<span>這是我$metaButton - 這個被點擊時，它運行在div.archive-meta-slide動畫 - 這是很簡單的，但我想只運行在當前div.module動畫動畫它所有的div類"archive-meta-slide"，和我真的很掙扎使用this

動畫只有當前div.archive-meta-slide它會很容易，如果div.archive-meta-slide是的$metaButton父DIV中，但是因爲它不在這個父級div中，所以我可以'沒有得到遍歷的權利。

見我的腳本

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"); 
});

誰能幫助？

感謝喬希

來源

2011-12-21 Joshc

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

這是真的密切。這實際上是說「找到類archive-meta-slide這個元素的父親的兄弟姐妹的後代」。你想說「找到類archive-meta-slide的元素是這個元素的父親的兄弟姐妹」。爲此，在siblings調用中使用一個選擇：

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

注意如果標記始終是這種結構，你甚至可以做$(this).parent().next()。

見jQuery的API：

來源

2011-12-21 15:05:46 lonesomeday

非常感謝很多 – Joshc 2011-12-21 15:26:52

+1用於添加文檔鏈接 – evanhutomo 2014-07-08 09:46:31

使用

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

這是因爲搜索childr好連接頂部模塊DIV

$（本）.parent（）的。父（）

將是你的首要

<div class="module">

來源

2011-12-21 15:10:30

也工作，謝謝！ – Joshc 2011-12-21 15:23:23

使用$(this).closest(".module")找到從哪裏父模塊點擊發生。

您也可能想在完成動畫後使用完成功能來更改文本。

關於.closest()的好處是，它只是在必要時查找父鏈，直到找到具有正確類的對象。這比使用特定數量的.parent()引用要脆弱得多，如果其他人改變你的HTML設計一點點（增加另一個div或跨度或類似於父鏈中的東西）。

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"); 
     }); 
    }, 
});

你也可以晾乾了一下，讓一個共同的功能：

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")} 
);

來源

2011-12-21 15:12:33 jfriend00

很好很聰明。這很好。 THanks – Joshc 2011-12-21 15:26:32

對我很有幫助，thx！ – SchweizerSchoggi 2015-02-02 14:27:14

正如jfriend00所解釋的那樣，使用'nearest（）'更健壯。 – 2017-08-03 19:09:29

試用closest這將讓你回去，直到你到達指定選擇父。

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

來源

2011-12-21 15:15:40 lxalln

也會嘗試這個謝謝 – Joshc 2011-12-21 15:28:05

您正在尋找...

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

如果#module結構發生變化，這可能是更穩健：

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

來源

2011-12-21 15:18:16 s4y

這也工作。謝謝 – Joshc 2011-12-21 15:27:43

使用

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

來源

2015-07-22 09:00:11 rakesh

jQuery獲得父元素只有這個元素的兄弟

回答

相關問題