循环遍历 ID 和数组 jQuery答案

【问题标题】：Loop through ID and array jQuery循环遍历 ID 和数组 jQuery
【发布时间】：2019-03-25 06:24:00
【问题描述】：

我有一个结帐页面，其中有一些显示在页面上的商品编号。我得到了所有的项目编号并将它们放入一个数组中。页面上的每个项目都有一个增加一个 (#item1, #item2) 和 .item 类的 ID。

如果该项目与数组中的 项目编号 匹配，则我需要隐藏或删除具有 .edit-item 类的编辑链接和“稍后保存”与类 .save 的链接。

我带着孩子去，以免影响页面上的其他项目，但我遇到了以下代码的问题。关于如何进行的任何建议？我觉得我可能搞错了。

var selectors = ["NMF19_N5N5K", "NMF19_N5N5E", "NMF19_N5N5N", "NMF19_N5N5L", "NMF19_N5N5C", "NMF19_N5N5F", "NMF19_N5N5M", "NMF19_N5N5Q", "NMF19_N5N5P", "NMF19_N5N5D"];
    var idNumber = 1;
    var i;

for (i = 0; i < selectors.length-1; i++) {

    if (jQuery('#item' + idNumber)) {
        jQuery('#item' + idNumber + ':contains(' + selectors[i] + ')' ).children()[8].children[0].children[2].children[1].children[0].children[2].remove();
        jQuery('#item' + idNumber + ':contains(' + selectors[i] + ')' ).children()[8].children[0].children[2].children[1].children[3].remove();
        idNumber++;
    }

}

【问题讨论】：

您需要在 for 循环的最顶部添加 idNumber = selectors[i];。
肯定错了，你的感觉很好:) 请把HTML输出的部分贴出来，我们可以看到项目的结构，以及你想隐藏的按钮。

标签： javascript jquery arrays for-loop

【解决方案1】：

虽然拥有实际的 HTML 会有所帮助，但描述与代码一起提供了 HTML 结构可能是什么的概念。在提供解决方案之前，我想先了解一些与 jQuery 相关的内容。

$ 是 jQuery 的别名。 $ 用于大多数在线示例代码。
jQuery(selector) 表达式将始终为真。要检查元素是否存在，请使用jQuery(selector).length。如果元素不存在，则表达式返回 0，否则返回匹配元素的计数。

解决方案是使用jQuery.each() 循环遍历所有.item 元素。然后使用Array.some() 和String.indexOf 从每行的列表中查找任何项目编号。如果找到，则删除编辑和保存操作按钮。

var itemNumbers = ["NMF19_N5N5K", "NMF19_N5N5E", "NMF19_N5N5N", "NMF19_N5N5L", "NMF19_N5N5C", "NMF19_N5N5F", "NMF19_N5N5M", "NMF19_N5N5Q", "NMF19_N5N5P", "NMF19_N5N5D"];

// Loop through all .item elements
$('.item').each(function() {
  // An item reference, Ex: #item1, #item2 ...
  var $item = $(this);
  // The item row as text
  var itemAsText = $item.text();

  // Check if this item row contains an item from the itemsNumbers list 
  var matched = itemNumbers.some(function(itemNumber) {
    return itemAsText.indexOf(itemNumber) > -1;
  });

  if (matched) {
    // Look for the edit and save elements within $item and delete them
    $item.find('.edit-item').remove();
    $item.find('.save').remove();
  }
});

ol {
  width: 400px
}

.item {
  margin-bottom: 5px;
}

.item button {
  margin-left: 5px;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li id="item1" class="item">Item 1 - NMF19_N5N5N <button class="save">Save</button><button class="edit-item">Edit</button></li>
  <li id="item2" class="item">Item 2 - Custom5<button class="save">Save</button><button class="edit-item">Edit</button></li>
  <li id="item3" class="item">Item 3 - NMF19_N5N5F <button class="save">Save</button><button class="edit-item">Edit</button></li>
  <li id="item4" class="item">Item 4 - Custom4 <button class="save">Save</button><button class="edit-item">Edit</button></li>
  <li id="item5" class="item">Item 5 - NMF19_N5N5D <button class="save">Save</button><button class="edit-item">Edit</button></li>
</ol>

【讨论】：