对于一个元素中的每一个，迭代其他元素的列表。 元素没有同级/父级关系

Question

Example code:

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>

For each mainButton, I want to iterate over the subElements it corresponds to by either finding the ones below it, or maybe adding some sort of reference?

Can anyone provide any solutions to this issue?

Answer 1

You'll need to group the subElements with separate class names then use jQuery to get all their values.

<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>

I would recommend better class names, but this is just for example. Then you can grab their values in your js:

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

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

Answer 2

If you cannot change anything to your HTML, then I think this would be a way to do it:

 $('.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> 

This collects all buttons and sub elements in one collection. Then it finds the index where the currently clicked button is positioned in that collection. All elements that come before this index, and also the clicked button itself, are sliced out of the collection. Now all following sub elements are those we are interested in, up until the end of the collection or the next main button.

For this solution it does not matter how deep things are nested, as long as their sequence in the DOM tree is such that all sub elements follow the main button to which they "belong".