通過使用.parent（）和.next（）方法的組合無法到達元素

我將以下函數綁定到切換按鈕，我已創建該按鈕來隱藏/取消隱藏位於按鈕下方的內容，但在DOM的另一個層面上。通過使用.parent（）和.next（）方法的組合無法到達元素

var togglelabel = packagehead.append("<div>").children().last().addClass("togglewrap").append("<label>") 
     .children().last().addClass("toggle android header-toggle") 
     .on('click', function(){ 
      $(this).parent().parent().next('.hidable').toggle(); 
     });

HTML結構如下：

<div> 
    <div class="packageheader"> 
     <span>Package #1501</span> 
     <div class="togglewrap"> 
      <label class="toggle android header-toggle"> 
       <input type="checkbox"> 
       <p> 
        <span>More</span> 
        <span>Less</span> 
       </p> 
       <a class="slide-button"> 
       </a> 
      </label> 
     </div> 
    </div> 
    <br> 
    <p class="hidable"> 
     <pre>content here</pre> 
    </p> 
</div>

此代碼不起作用隱藏<p>與類.hidable。我試着'調試'的代碼使用console.log（）看看什麼元素'這'表示，並發現它，如預期的那樣，表示標籤元素。

所以我認爲，使用下面的鏈條：

$(this).parent().parent().next('.hidable').toggle();

會正確地去2層到<div class="packageheader">，然後採取與類hidable下一個兄弟，這將是<p class="hidable">

這裏結構的截圖，以確保我沒有錯過任何東西： enter image description here

來源

2013-08-07 Spyral

你是怎麼定義軟件包的？ – nubinub

$（this）.parents（'。packageheader'）。siblings（'。hidable'）。toggle（）; – SVS

@SVS否：這將在同一級別切換所有.hidable，而不僅僅是.packageheader之後的那個（請參閱您的評論很久之前的答案）。 –

你可以這樣做：

$(this).closest('.packageheader').nextAll('.hidable').first().toggle();

請注意，這是稍微最好使用closest而不是parent().parent()，因爲它不會破那麼容易當HTML變化和它的維護更容易破譯的代碼做什麼。

還請注意，您的HTML無效，P內不能有PRE。

Demonstration

來源

2013-08-07 09:18:25

選擇所有.hidable以選擇一個選項有什麼意義？ – Andy

@Andy您是否有更好的可讀性更強的解決方案，而不是暗示重型選擇器？然後我希望看到它......並且它不會全部選中，只會包含在.packageheader元素之後的那個。 –

我正在嘗試此代碼，但它似乎沒有隱藏段落。 – Spyral

通過使用.parent（）和.next（）方法的組合無法到達元素

回答

相關問題