如何遍歷數組並查找與數組中的值匹配的項

Question

我有2組數組，它​​們的值由data-attribute(data-product-name)抓取，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');
        }
      });
    });

理想情況是，當用戶單擊edit_country按鈕時，.whole_list已經將那些選定的項目按鈕更改為DETACH文本。 我試過了，但是問題是，它只更改了項目A和項目B按鈕，項目E按鈕沒有變化。

我認為這與索引不匹配有關。 我不確定，請告知，謝謝。

示范現場

Answer 1

使用.indexOf查找數組中是否存在值。
像這樣：

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

因為使用$(this).data('product-name') === arrProductName[index] ...
如果您的數組是這樣的：

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

將在索引0處找到a 。
b找不到，
c 不會在索引2處找到。它是d ，
d 不會在索引3上找到...它是undefined ，
找不到e 。

在CodePen中看到它。

Answer 2

試試下面的代碼

$('.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');
  });

});