I'm attempting to create a script that will add a class based on whether or not a list item's span id contains certain words from a list.
The list follows this structure:
<div id="main_list">
<li class>
<a data-item_number_id="555000" class="item" <span id="displayname">greyblackhammer</span></a>
<li class>
<a data-item_number_id="555002" class="item" <span id="displayname">grey_green_hammer</span></a>
<li class>
<a data-item_number_id="555004" class="item" <span id="displayname">red_orangehammer</span></a>
This list contains thousands of entries.
Let's assume I have:
var list_of_words = ["Green", "black", "other_words"]
The goal is to search through the span ids and if they contain any of the strings in the list of words, add a "starred" class to their parent, as shown in this example:
<div id="main_list">
<li class ="starred">
<a data-item_number_id="555000" class="item" <span id="displayname">greyblackhammer</span></a>
<li class="starred">
<a data-item_number_id="555002" class="item" <span id="displayname">grey_green_hammer</span></a>
<li class>
<a data-item_number_id="555002" class="item" <span id="displayname">red_orangehammer</span></a>
Case and spacing are both irrelevant - the focus is on whether the span id contains the desired string in any form.
Since I'm not very knowledgeable in jQuery, I haven't made much progress. Here's what I have so far:
ids_to_star = ["Green", "black"];
function star_matching_span_ids(){
var matching_ids = $('#main_list').find("div:contains(ids_to_star)");
$.each(matching_ids, function (){
$(this).parent('li').addClass('starred');
});
}
Unfortunately, this code doesn't work as expected and fails to select the span ids correctly. I would appreciate any guidance you can provide.