遍歷ID和數組jQuery

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相關的內容。

1. $是jQuery的別名。 在線大多數示例代碼中都使用$ 。
2. 表達式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>