遍历ID和数组jQuery

Question

I have a checkout page that has some item numbers that show up on the page. I got all the item numbers and put them into an array. Each item on the page has an ID that increases by one (#item1, #item2) and class of .item .

If the item matches an item number in the array then I need to hide or remove an edit link with the class of .edit-item and a Save For Later link with the class .save .

I went with children so as to not affect other items on the page but I am running into issues with the code below. Any advice on how to proceed? I feel like I might have approached this wrong.

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

While having the actual HTML would have been helpful the description along with the code provides an idea of what HTML structure might be. Before providing a solution I will like to go over a few jQuery related things.

1. $ is an alias of jQuery . $ is used in most example code online.
2. The expression jQuery(selector) will always be truthy. To check if an element exists use jQuery(selector).length . The expression results in 0 if the element does not exist, the count of matched elements otherwise.

The solution is to loop through all .item elements with jQuery.each() . Then use Array.some() and String.indexOf to find any of the item numbers from the list in each row. If found then remove the edit and save action buttons.

 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>