send that specific element which is triggered by onClick function

Question

This is my HTML :

<li class="custom-bottom-list">
    <a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a>
</li>

My javascript function Upvote :

function upvote(el){
    $(el+' i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
    console.log( event );
}

Basically i want to select and change the css of the 'i' tag inside the particular element which is clicked. What its doing now is its changing the css of all 'i' tags present in the page.
Can somebody tell me a efficient way to do this?

PS - I tried onClick="upvote(event) and $(event.target).removeClass('fa-thu..
But this works only when I click the 'i' tag. When i click the span tag it changes the span's css!

score 2 · Answer 1 · edited May 23 '17 at 12:05

You can't glue different selectors like that together.

el does not contain a string selector, so you need to use the jQuery library to traverse to the i element.

If you were to console.log(el) you would see why that selector wouldn't work.

Use .find:

$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

Another method (although slower, and more limited because it only travels one level in the DOM):

$(el).children('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

And, as @newboyhun pointed out, another way is to provide context to the selector:

$('i', el).removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

Yes he can't glue the selectors like that, but it is possible to change the context like this: $('i', el) — Dávid Szabó, Jun 21 '14 at 12:55

RGS · Answer 2 · 2014-06-21T13:03:21.900

1

$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

edited Jun 21 '14 at 13:03

answered Jun 21 '14 at 12:55

RGS

5,131
6
37
65

chriz · Accepted Answer · 2014-06-21T13:01:47.583

1

use find() to get child

$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

or you can find child using class like below

$('.fa-thumbs-o-up',el).removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

u can try children() too

$(el).children('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

edited Jun 21 '14 at 13:01

answered Jun 21 '14 at 12:56

chriz

1,339
2
16
32

1

I think your second option (child class) is flawed. Can't glue selectors together like that... – random_user_name Jun 21 '14 at 13:01
1

Whats better? find('i') or children('i') ? – jackkorbin Jun 21 '14 at 13:02
1

@jackkorbin - actually, `.children` is. See this question / answer: http://stackoverflow.com/questions/2384793/jquery-difference-between-searching-children-and-find – random_user_name Jun 21 '14 at 13:03
@jackkorbin exact answer is [here](http://stackoverflow.com/questions/648004/what-is-fastest-children-or-find-in-jquery) – chriz Jun 21 '14 at 13:04
1

In that case i think find wud be better because u never know how many levels u gonna increase in future. no? – jackkorbin Jun 21 '14 at 13:06
1

@jackkorbin that kinda thing is really a judgement call. In your case, if you think that its a possibility that the levels will increase, and that you would still want to maintain the same behavior, then `find()` *is* the better option. If you think its possible that a new `i` will be added at a different *level* that would NOT use the same behavior, then use `children()`. Not really a big deal in either case to modify as needed if/when that comes up. When in doubt, I usually choose the more specific option: `children` in this case. – Zach Lysobey Jun 21 '14 at 15:02

score 0 · Answer 4 · answered Jun 21 '14 at 12:58

0

You can try this

if you want to custom CSS

$(el).find('i').css({'color' : 'black'});

if you want to add or remove Class

$(el).find('i').removeClass('fa-thumbs-o-up').addClass("fa-spin");

answered Jun 21 '14 at 12:58

Paresh Thummar

933
7
20

send that specific element which is triggered by onClick function

4 Answers4