對於每個元素，遍歷其他元素的列表。元素沒有兄弟/父母關係

Question

示例代碼：

codepen

<div> 
    <button class="mainButton">CLICK ME!</button> 
</div> 
<div> 
    <div class="subElement">David</button> 
    <div class="subElement">Joe</button> 
</div> 

<div> 
    <button class="mainButton">AND ME!</button> 
</div> 
<div> 
    <div class="subElement">Billy</button> 
    <div class="subElement">Bob</button> 
</div> 

對於每個mainButton，我要遍歷子元件它對應於由任一找到的那些在其下方，或者也許加入一些有點參考？

任何人都可以提供任何解決此問題？

Answer 1

如果你沒有什麼改變你的HTML，那麼我認爲這將是一個辦法做到這一點：

$('.mainButton').click(function() { 
 
    var texts = []; 
 
    var $all = $('.mainButton,.subElement'); 
 
    $all.slice($all.index(this)+1).each(function() { 
 
     if ($(this).is('.mainButton')) return false; // break out 
 
     texts.push($(this).text()); 
 
    }); 
 
    console.log(texts); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button class="mainButton">CLICK ME!</button> 
 
</div> 
 
<div> 
 
    <div class="subElement">David</div> 
 
    <div class="subElement">Joe</div> 
 
</div> 
 

 
<span> 
 
<div> 
 
    <button class="mainButton">AND ME!</button> 
 
</div> 
 
<div> 
 
    <div class="subElement">Billy</div> 
 
    <div class="subElement">Bob</div> 
 
</div>

這收集了一個集合中的所有按鈕和子元素。然後它找到當前點擊的按鈕位於該集合中的索引。此索引之前的所有元素以及單擊的按鈕本身都將從集合中切出。現在，所有以下子元素都是我們感興趣的元素，直到集合結束或下一個主要按鈕。

對於這種解決方案，只要它們在DOM樹中的順序是這樣的，即所有子元素都跟隨它們所屬的主按鈕，這並不重要。

Answer 2

您需要將子元素分組爲單獨的類名，然後使用jQuery獲取所有值。

<div> 
    <button class="mainButton" onclick="main1()">CLICK ME!</button> 
</div> 
<div> 
    <div class="subElement1">David</button> 
    <div class="subElement1">Joe</button> 
</div> 

<div> 
    <button class="mainButton" onclick="main2()">AND ME!</button> 
</div> 
<div> 
    <div class="subElement2">Billy</button> 
    <div class="subElement2">Bob</button> 
</div> 

我會推薦更好的類名，但這只是例子。然後你就可以抓住他們的價值在您的JS：

function main1() { 
    var sub1s = $('.subElement1').val(); //this will be an array of their values 
} 

function main2() { 
    var sub2s = $('.subElement2').val(); //also an array 
}