jQuery求助：匹配两列表文本添加类仅最后项生效的问题解决

API 探路者

2026-6-16

问题：匹配列表文本并添加类名仅最后一项生效

我需要检测list_1中的文本是否存在于list_2中，找到匹配项时给对应的list_2列表项添加“show”类。示例里“This is text c”和“This is text e”都应该被添加该类，但当前代码只有最后一项“This is text e”生效。

原HTML代码：

<ul class="list_1">
  <li>This is text c</li>
  <li>This is text e</li>
</ul>

<ul class="list_2">
  <li><i class="far fa-fw fa-square"></i>This is text a</li>
  <li><i class="far fa-fw fa-square"></i>This is text b</li>
  <li><i class="far fa-fw fa-square"></i>This is text c</li>
  <li><i class="far fa-fw fa-square"></i>This is text d</li>
  <li><i class="far fa-fw fa-square"></i>This is text e</li>
</ul>

原Script代码：

$(function(){

var showTag;

$('.list_1 li').each(function(){
      showTag = $(this).text();
});

$('.list_2 li').each(function(){
   if($(this).text()==showTag)
       $(this).closest('li').addClass('show');
});

});

错误原因

你当前的代码逻辑有问题：showTag是单个变量，遍历list_1的每个li时，会不断用新的文本覆盖掉旧值，循环结束后showTag只会保留list_1最后一个li的内容（也就是“This is text e”），所以遍历list_2时自然只能匹配到最后一项。

修正后的代码

把list_1的所有目标文本存到一个数组里，再遍历list_2检查当前项是否在数组中：

$(function(){
    // 收集list_1中所有li的文本，trim去除前后空白避免匹配误差
    var targetTexts = $('.list_1 li').map(function(){
        return $(this).text().trim();
    }).get();

    $('.list_2 li').each(function(){
        var currentLiText = $(this).text().trim();
        // 检查当前文本是否在目标数组内
        if(targetTexts.includes(currentLiText)){
            $(this).addClass('show'); // $(this)就是当前li，无需closest
        }
    });
});