Javascript 如何在数组中循环并查找与数组中的值匹配的项

我有两组数组，它们的值由

数据属性（数据产品名称）

获取，1是可用项目的完整列表，另1是选定项目，对于选定项目，它们附加到国家/地区

    <!-- the item list -->
    <div class="whole_list">
      <ul>
        <li data-product-name="a">item A<button>ATTACH</button></li>
        <li data-product-name="b">item B<button>ATTACH</button></li>
        <li data-product-name="c">item C<button>ATTACH</button></li>
        <li data-product-name="d">item D<button>ATTACH</button></li>
        <li data-product-name="e">item E<button>ATTACH</button></li>
      </ul>
    </div>

    <!-- selected item block -->
    <div class="selected_item_container"> 
      <ul class="selected_items">
        <li data-product-name="a">item A</li>
        <li data-product-name="b">item B</li>
        <li data-product-name="e">item E</li>
      </ul>
      <button class="edit_country">EDIT</button>
    </div>


    $('.edit_country').on('click', function () {
      // to grab text/string from .whole_list data-product-name
      var productName = []; // product name
      $('.whole_list li').each(function (index) {
        productName .push($(this).data('product-name'));
      });

      // to grab text/string from .selected_item_container data-product-name
      var selProductName = []; // selected product name
        $('.selected_item_container').find('[data-product-name]').each(function () {
         selProductName .push($(this).data('product-name'));
       });

      // if the string/text matches, change the button text
      $('.whole_list li').each(function (index) {
      if ($(this).data('product-name') === arrProductName[index]) {                         
        $(this).find('button').text('DETACH');
        } else {
          $(this).find('button').text('ATTACH');
        }
      });
    });

项目a附件
项目名称
物品类别
项目数据
项目附件


项目a
项目b
项目e

编辑
$（'.edit_country'）。在（'单击'，函数（）{
//从.whole_列表数据产品名称中获取文本/字符串
var productName=[]；//产品名称
$（'.whole_list li'）。每个（函数（索引）{
productName.push（$（this.data（'product-name'））；
});
//从.selected\u item\u容器数据产品名称中获取文本/字符串的步骤
var selProductName=[]；//所选产品名称
$（'.selected_item_container'）。查找（'[data product name]'）。每个（函数（）{
selProductName.push（$（this.data（'product-name'））；
});
//如果字符串/文本匹配，请更改按钮文本
$（'.whole_list li'）。每个（函数（索引）{
if（$（this）.data（'product-name'）==arrProductName[index]）{
$（this）.find（'button'）.text（'DETACH'）；
}否则{
$（this）.find（'button'）.text（'ATTACH'）；
}
});
});

理想情况下，当用户单击“编辑国家/地区”按钮时。我试过了，但问题是，它只更改了项目A和项目B按钮，项目E按钮没有更改

我认为这与索引不匹配有关。我不确定，请告知，谢谢

用于查找数组中是否存在值。
像这样：

arrProductName.indexOf( $(this).data('product-name') ) != -1

因为，使用

$（this）.data（'product-name'）===arrProductName[index]

…
如果您的阵列类似于：

var arrProductName = ["a","c","d"];

a

将在索引

0

，
将找不到

b

，

c

将在索引

2

中找到。。。它是

d

，

d

将不在索引

3

中找到。。。它是未定义的

，

将找不到
e
。

请参阅。
用于查找数组中是否存在值。

像这样：

arrProductName.indexOf( $(this).data('product-name') ) != -1

因为，使用
$（this）.data（'product-name'）===arrProductName[index]
…

如果您的阵列类似于：

var arrProductName = ["a","c","d"];

a
将在索引
0
，

将找不到
b
，

c
将在索引
2
中找到。。。它是
d
，

d
将不在索引
3
中找到。。。它是未定义的
，

将找不到
e
。

请参阅。
尝试下面的代码

$('.edit_country').on('click', function() {
  // to grab text/string from .whole_list data-product-name
  var productName = []; // product name
  $('.whole_list li').each(function(index) {
    productName.push($(this).data('product-name'));
  });

  // to grab text/string from .selected_item_container data-product-name
  var selProductName = []; // selected product name
  $('.selected_item_container').find('[data-product-name]').each(function() {
    selProductName.push($(this).data('product-name'));
  });

  $(selProductName).each(function(index) {
    $('.whole_list li[data-product-name=' + selProductName[index] + ']').find('button').text('DETACH');
  });

});

请尝试下面的代码

$('.edit_country').on('click', function() {
  // to grab text/string from .whole_list data-product-name
  var productName = []; // product name
  $('.whole_list li').each(function(index) {
    productName.push($(this).data('product-name'));
  });

  // to grab text/string from .selected_item_container data-product-name
  var selProductName = []; // selected product name
  $('.selected_item_container').find('[data-product-name]').each(function() {
    selProductName.push($(this).data('product-name'));
  });

  $(selProductName).each(function(index) {
    $('.whole_list li[data-product-name=' + selProductName[index] + ']').find('button').text('DETACH');
  });

});

你看到了什么。好极了。我不理解这样的问题。你当然走对了。但是对你的代码再多解释一下就好了谢谢@Louys Patrice Bessette，我是stackoverflow的新手。我会尽量多解释的。OP想要识别所选的li，所以，1）首先为什么要迭代较大的集合，其次为什么要迭代dom，因为他已经在数组中选择了i值。2） 既然我们可以利用css选择器和jquery的强大功能，为什么还要基于索引进行数组映射呢。它更高效、更不容易出错、更干净，而且代码更少@Grey哦，你能试试吗？我也试过了，但同样的问题依然存在。Louys Patrice已经为我解决了这个问题。感谢您的efforrt SamB。谢谢你。@Grey哦，我尝试了我的解决方案，并且能够得到你所需要的。不管怎样，很高兴你得到了答案。你在那里看到了一些东西。好极了。我不理解这样的问题。你当然走对了。但是对你的代码再多解释一下就好了谢谢@Louys Patrice Bessette，我是stackoverflow的新手。我会尽量多解释的。OP想要识别所选的li，所以，1）首先为什么要迭代较大的集合，其次为什么要迭代dom，因为他已经在数组中选择了i值。2） 既然我们可以利用css选择器和jquery的强大功能，为什么还要基于索引进行数组映射呢。它更高效、更不容易出错、更干净，而且代码更少@Grey哦，你能试试吗？我也试过了，但同样的问题依然存在。Louys Patrice已经为我解决了这个问题。感谢您的efforrt SamB。谢谢你。@Grey哦，我尝试了我的解决方案，并且能够得到你所需要的。不管怎样，很高兴你得到了答案。