Question

示例代码：

<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，我想迭代它对应的subElements，找到它下面的那些，或者可能添加某种引用？

任何人都可以为此问题提供任何解决方案吗？

Answer 1

您需要使用单独的类名对subElements进行分组，然后使用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
}

Answer 2

如果您无法对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树中的序列使得所有子元素都遵循它们“所属”的主按钮。

对于每个元素，迭代其他元素的列表。元素没有兄弟/父母关系

2 个答案: