CODEWITHSUNDEEP
jquery
Gunnit
Gunnit

Reputation: 1074

how to select target tag with jquery?

Hello everybody and thanks for reading.

I have this html;

<i class="icon-plus icon-white"> Test 1</i>

How can i select this with jquery and change the "icon-plus" in "icon-minus" and replace the text "Test 1" into something else?

Upvotes: 0

Views: 144

Answers (6)

martinthebeardy
martinthebeardy

Reputation: 762

If this is the only tag <i> then you could use:

$("i").removeClass("icon-plus").addClass("icon-minus").html([your html])

This will remove your class 'icon-plus', then add the class 'icon-minus', followed by inserting the html that you choose to enter.

I've opted to use .html() in my example as it gives you the ability to add <a> tags or <p> tags (or more!), so that your text can have custom css applied (if you've got it)

The other suggestions of using .text() are plausible too.

Check the documentation for jQuery Selectors, .removeClass(), .addClass() and .html() and .text()

It all depends on how much control you want over the object you're dealing with and what exactly you want to do with it.

Have a play, try some new stuff out, and have fun! :)

Upvotes: 2

user1423506
user1423506

Reputation:

Try this one 

$("i").removeClass('icon-plus').addClass('icon-minus');
$("i").html("Some Text");

Upvotes: 2

oleg
oleg

Reputation: 197

You should review this page selectors for select element. And this attributes for changing.

Upvotes: 0

Kurt
Kurt

Reputation: 7212

You can use addClass to add a class, removeClass to remove a class, and text to change the text. For example:

HTML:

<i id="item" class="icon-plus icon-white"> Test 1</i>

JS:

​$('​​​#item').removeClass('icon-plus').addClass('new-class').text('new  text');​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176896

Demo

$(".icon-plus").removeClass("icon-plus").addClass("icon-minus").html("new text");

Upvotes: 2

zessx
zessx

Reputation: 68790

Assuming you're searching for every icon-plus :

var tag = $('i.icon-plus');
tag.removeClass('icon-plus');
tag.addClass('icon-minus');
tag.text('Something else');

If you want catch a specific item, you must use id="myid"

Upvotes: 0

Related Questions