Question

我有一个结帐页面，该页面上显示了一些项目编号。我得到了所有的项目编号，并将它们放入一个数组中。页面上的每个项目都有一个ID，该ID会增加一个（＃item1，＃item2），并且类别为 .item 。

如果该项目与数组中的项目编号相匹配，那么我需要隐藏或删除具有 .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++;
    }

}

Answer 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>

遍历ID和数组jQuery

1 个答案: