How to Add attr ID Based on Value use jQuery

Question

I want to add attr DIV on one of the list according to the values in UL LI as below.

<ul id="menu">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

I hope I can add to the list About, but failed.

I use the code like this:

<script type='text/javascript'> 
$(function() {
$('#menu li').html("About").attr("id","active")
}); 
</script>

But it did not work. There is a solution?

I'm having a hard time understanding what exactly you are trying to accomplish. From my understanding you want to add a DIV tag to the list item based on some criteria is that correct? — aemorales1, Feb 22 '16 at 13:59
Have updated my answer in light of your comment. See also: http://stackoverflow.com/questions/7321896/jquery-find-element-by-text — fridge_light, Feb 22 '16 at 14:11

score 1 · Answer 1 · answered Feb 22 '16 at 14:03

1

This should work

$(function(){
    $("#menu li a:contains('About')").parent().attr("id", "active");
})

answered Feb 22 '16 at 14:03

Mihir Solanki

333
1
6

fridge_light · Accepted Answer · 2016-02-22T15:03:29.693

1

You can target an element by its content using the :contains selector. In this case, the id attribute will be added to the a element within your list that contains the text 'About':

$('#menu li a:contains("About")').attr("id","active");

Result:

<li><a href="about.html" id="active">About</a></li>

edited Feb 22 '16 at 15:03

answered Feb 22 '16 at 14:06

fridge_light

436
1
3
7

How to Add attr ID Based on Value use jQuery

2 Answers2