CODEWITHSUNDEEP
javascriptjquery
Dr.Avalanche
Dr.Avalanche

Reputation: 1996

Javascript/jQuery - Update list display based upon values of array

I have an ul like so:

<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
...
</ul>

Now I have an array being returned via AJAX which contains various values. I'd like to alter the CSS and append data to each of the lis where the value within exists within the array.

Sometimes values are repeated, e.g.

<li>foo</li>
<li>bar</li>
<li>foo</li>

In such cases all matching lis should be altered.

I've managed to make this work for a fixed value, but I'd like to run this as a function for each element in the array:

$("ul li:contains('foo')").each(function(){
    $(this).append(" found foo");
});

Sorry if I'm using the wrong terminology, it's been a while since I did anything Web/JavaScript related.

Upvotes: 0

Views: 152

Answers (1)

Angelos Chalaris
Angelos Chalaris

Reputation: 6747

Provied that a is your array of values you got via AJAX, you can loop through them and update the elements as follows:

var a = ['foo', 'bar'];
a.forEach(function(entry) {
    $("ul li:contains('"+entry+"')").each(function(){
        $(this).append(" found "+entry);
    });
});

Full JSFiddle here.

Upvotes: 1

Related Questions