jQuery show-hide找到下一個元素遠近

這個show-hide函數試圖匿名這樣做，而不需要維護目標div的唯一ID。jQuery show-hide找到下一個元素遠近

我無法理解爲什麼我的選擇器var div在示例＃4中不起作用，以及我如何能夠使它適用於所示的所有示例。

$('.expander').click(function(e) 
{ 
    e.preventDefault(); 
    var div = $(this).nextAll('div.content').first(); 
    if (div) 
    { 
     if (div.css('display') == "none") 
     { 
      div.show(); 
      $(this).removeClass("closed"); 
      $(this).addClass("open"); 
     } 
     else 
     { 
      div.hide(); 
      $(this).removeClass("open"); 
      $(this).addClass("closed"); 
     } 
    } 
});

<div> 
    <a href="#" class="expander open">example 1</a><br /> 
    <div class="content open">shown content</div> 
    <a href="#" class="expander closed">example 2</a><br /> 
    <div class="content closed">hidden content</div> 
    <a href="#" class="expander closed">example 3</a><br /> 
    <!-- comments --> 
    <span>other content</span> 
    <div class="content closed">hidden content</div> 
    <p> 
     <span> 
      <a href="#" class="expander closed">example 4</a> 
     </span> 
    </p> 
    <div class="content closed">content</div> 
</div>

前三個例子很好地工作。但是當我部署這個代碼時，我發現錨點可能被編碼的方式有所不同。我正在尋找一種解決方案，無論錨點如何封裝。

底線是我想選擇下一個div.content到錨點，不管它是否是下一個，或者如果jQuery必須走上DOM樹才能找到它。

我有這個代碼的工作模型here。

來源

2012-10-11 pschlosser

我希望我知道我的文章中HTML的語法着色有什麼問題。 – pschlosser

ahhh。我想出了帖子中的語法着色。 :) – pschlosser

因爲你的錨是nested inside a span這又嵌套在a ptag

而這並不在例如＃4
var div = $(this).nextAll('div.content').first();

對於例如＃4你需要這個選擇的情況下意義

var div = $(this).closest('p').nextAll('div.content').first();

來源

2012-10-11 17:03:09

我正在使用這個，站點範圍內，錨標記如何編碼的變化。你的例子可能會工作，但它是特定於'P'標記。我希望有一種方法可以對此進行編碼，因此它適用於所有人，而不僅僅是這種特殊情況......因爲坦率地說，還有其他特殊情況。例如，無序列表中的錨標籤和div等。 – pschlosser

我得到了這個工作走上父樹，直到我看到下一個目標div。

var div = $(this).nextAll('div.content').first(); 
if (div.length == 0) 
{ 
    div = $(this).parentsUntil('body').nextAll('div.content').first(); 
}

我真的不喜歡的條件，但除非我找到更優雅，我會用這根棍子。

來源

2012-10-11 20:24:23 pschlosser

jQuery show-hide找到下一個元素遠近

回答

相關問題