用 Jquery 中另一个 html 列表的索引填充一个 html 列表答案

【问题标题】：Populate an html list with index of another html list in Jquery用 Jquery 中另一个 html 列表的索引填充一个 html 列表
【发布时间】：2017-05-01 02:31:48
【问题描述】：

见附图。在 jquery 中，如何在列表 B 中生成红色的小数字？红色的小数字（2,3,8）代表列表A中蓝色背景的列表元素的索引位置。

如何使用 Jquery 提取列表 A 中蓝色框的索引并将它们添加到列表 B 中的小框中？有什么提示吗？

脚本

var wrapper = $('.orig-list li');
wrapper.each(function() {
    wrapper.text(newStr);
    for(var i = 0; i< wrapper.length; i++) {
        $('.index').each(function(){
            $(this).text(wrapper.index(i));
        });
    }
});

【问题讨论】：

您的问题看起来像是您发布的另一个 stackoverflow.com/q/41160449/1415724 的转贴，其中包含“一些”代码，但没有 HTML。您在这里的问题根本不包含任何代码。我敢肯定，Google 会为此获得很多点击率，我 100% 肯定。
这是在“相关”stackoverflow.com/questions/27449569/… btw 下的一个，很可能是重复的。
这是一个转发，我转发是因为没有人回答因为我认为没有人理解，如果有任何提示谷歌请帮助我找到
您需要共享 HTML 和您尝试的脚本
没有人回答可能是因为他们不知道“如何”回答，因为您遗漏了很多相关代码并且您没有在此处执行此操作，也没有在此处执行此操作。所以设身处地为他们着想，你就会明白我的意思。人们知道的越少，您获得解决方案的机会就越少，花费的时间就越多。 ;-)

标签： jquery html list indexing each

【解决方案1】：

您可以使用.filter(fn)获取原始列表中的匹配元素，使用[.index(element)][2]获取匹配元素索引。

var origList = $('.orig-list li')
$('.next-list li').each(function(i) {
    var text = $(this).text();
    var matchingElement = origList.filter(function() {
        return text == $(this).text()
    });
    if (matchingElement.length) {
        $(this).text(text + " " + origList.index(matchingElement));
        matchingElement.addClass('high')
    }
});

注意 1： 在示例中我使用了 exact 匹配条件。我建议您使用data-* 自定义属性来建立这些列表的li 元素之间的关系。

注2：索引以0开头。

var origList = $('.orig-list li')
$('.next-list li').each(function(i) {
  var text = $(this).text();
  var matchingElement = origList.filter(function() {
    return text == $(this).text()
  });
  if (matchingElement.length) {
    $(this).text(text + " " + origList.index(matchingElement));
    matchingElement.addClass('high')
  }
});

.high {
  background-color: #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="orig-list">
  <li>A</li>
  <li>B</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>K</li>
  <li>L</li>
</ul>

<ul class="next-list">
  <li>L</li>
  <li>D</li>
  <li>B</li>
  <li>F</li>  
</ul>

【讨论】：