Use jquery to change the class of a target element from array

Question

I have a List li of elements that I used .toArray(). I now need to loop through them to find the desired element and change its style Class.

I am not sure what I am doing wrong, but I cannot seem to get the class of the index item, but I can retrieve the innerHTML no problem.

var viewsIndex = $('#viewsList li').toArray()
        for(i=0; i < viewsIndex.length; i++) {
            if(viewsIndex[i].innerHTML == selectedTab) {

                console.log(viewsIndex[i].attr('style')); //This does NOT work
                console.log(viewsIndex[i].innerHTML); //This does work
            }
            else
            {


            }
        }

Once I target the Element, I want to use .removeClass and .addClass to change the style.

gdoron · Accepted Answer · 2013-01-19 17:28:33Z

5

This is the DOM object which doesn't have jQuery functions:

viewsIndex[i]

This is the jQuery object which has the attr function:

$(viewsIndex[i]).attr('style')

Anyway, your code could be a lot simpler with this:

$('#viewsList li').filter(function(){
    return this.innerHTML == selectedTab;
}).removeClass('foo').addClass('bar');

answered Jan 19, 2013 at 17:28

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Florian Margaine Over a year ago

Please use $(this).html() :-). jQuery doesn't normalize everything for you to use innerHTML :P

gdoron Over a year ago

@FlorianMargaine, this is so wrong, jQuery wasn't meant to replace javascript(as it is javascript...), it helps you doing things easier, if you are over using jQuery- meaning you're using verbose jQuery functions instead of using js native functions, you're doing something wrong. jQuery- write less do more, isn't it? please read the "Know Your DOM Properties and Functions"

Florian Margaine Over a year ago

Dude. innerHTML works differently across browsers. jQuery normalizes everything for you. If you're using jQuery, at least use it when necessary --- this case is a necessary one.

rlemon Over a year ago

@gdoron with that logic why wrap the element to use .attr() when .getAttribute() is faster, well supported and not overly verbose in comparison to the jQuery method.

gdoron Over a year ago

@rlemon, I think getAttribute has some problems in some browsers, anyway I do use getAttribute if I know which browsers I'm targeting. with innerHTML I've never heard or had problems. see this in the source code of jQuery's attr: attrHooks

Adil · Accepted Answer · 2013-01-19 17:26:49Z

4

You are trying to call jQuery function on DOM object convert it to jQuery object first.

Change

viewsIndex[i].attr('style')

To

$(viewsIndex[i]).attr('style')

answered Jan 19, 2013 at 17:26

Adil

148k25 gold badges217 silver badges207 bronze badges

4 Comments

Rob Over a year ago

I just tried var $item = viewsIndex[i]; console.log($item.attr('style')); with no luck.

gdoron Over a year ago

@Rob, well... This isn't the code he wrote in his answer... anyway, you're doing it wrong, use the filter function.

Adil Over a year ago

You did not convert the element to jQuery object try this, var $item = $(viewsIndex[i]); console.log($item.attr('style'));

Rob Over a year ago

Just saw that error on my part. thanks for the quick responses

bashleigh · Accepted Answer · 2013-01-19 17:34:33Z

1

couldn't you use .each()?

$('#viewLists li').each(function(i){
    if($(this).html == selectedTab){
       $(this).removeClass('foo').addClass('bar');
    }
});

answered Jan 19, 2013 at 17:34

bashleigh

9,4145 gold badges33 silver badges50 bronze badges

Comments

RayViljoen · Accepted Answer · 2013-01-19 17:32:41Z

0

Loop over the elements using jQuery each and then access them as $(this). This way you'll have access to jQuery methods on each item.

$('#viewsList li').each(function(){

    var element = $(this);

    if(element.html() == selectedTab){
        console.log(element.attr('style')
    } else {

    }
}

answered Jan 19, 2013 at 17:32

RayViljoen

1,3311 gold badge12 silver badges15 bronze badges

Collectives™ on Stack Overflow

Use jquery to change the class of a target element from array

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related