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

Posted 2023-03-16

【中文标题】用 Jquery 中另一个 html 列表的索引填充一个 html 列表

【英文标题】：Populate an html list with index of another html list in Jquery

【发布时间】：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));
        );
    
);

【问题讨论】：

您的问题看起来像是您发布的另一个 ***.com/q/41160449/1415724 的转贴，其中包含“一些”代码，但没有 html。您在这里的问题根本不包含任何代码。我敢肯定，Google 会为此获得很多点击率，我 100% 肯定。

这是在“相关”***.com/questions/27449569/… btw 下的一个，很可能是重复的。

这是一个转发，我转发是因为没有人回答因为我认为没有人理解，如果有任何提示谷歌请帮助我找到

您需要共享 HTML 和您尝试的脚本

没有人回答可能是因为他们不知道“如何”回答，因为您遗漏了很多相关代码并且您没有在此处执行此操作，也没有在此处执行此操作。所以设身处地为他们着想，你就会明白我的意思。人们知道的越少，您获得解决方案的机会就越少，花费的时间就越多。 ;-)

【参考方案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>