Accessing Objects inside HTML Object with JS

Question

I am creating an array of div tags inside the player table div. I'm getting all div tags with class .players. The divs with class name .players have input fieds and a link field inside. I want to be able to manipulate these (remove, add class, etc...)

What I thought would work would be something like:

$(divarray[j]+' .link').hide();
$(divarray[j]+' a').remove('.link');

But it's not working. Any thoughts? I'm sure it's something simple but it's my first time at JS :)

var divarray = $('#player-table > .players');
        for( var j = 0; j < 10; j++){
        $(divarray[j]).removeClass("players");
        $(divarray[j]).addClass("selected_players");
        $('#debug').append(divarray[j]);
        $(divarray[j]+' a').hide();
    }

Felix Kling · Accepted Answer · 2011-10-21 21:19:30Z

3

First of all, you cannot just concatenate jQuery objects or DOM nodes with strings to create new selectors. jQuery provides methods for this kind of situations, where you already have an object or DOM node and want to find other related nodes.

Second, with jQuery there are much better ways to process a set of elements. Here is your code in more jQuery-like way. This is just an example, because I don't know the HTML structure. You have to adjust it so that it selects and applies to the correct elements.

$('#player-table > .players').slice(0,10) // gets the first 10 elements
 .removeClass("players")                  // removes the class from all of them
 .addClass("selected_players")            // adds the class
 .find('a').hide().end()                  // finds all descendant links and hides them
 .appendTo('#debug');                     // appends all elements to `#debug`

As you maybe see, there is only one semicolon at the last line. That means this whole code block is just one statement, but splitting it up over several lines increases readability.

It works because of the fluent interface, a concept which jQuery heavily makes use of. It lets you avoid creating jQuery objects over and over again, like you do ($(divarray[j])).

Another advantage is that you can work on the whole set of elements at once and don't have to iterate over every element explicitly like you have to do with "normal" DOM manipulation methods.

For learning JavaScript, I recommend the MDN JavaScript Guide.
jQuery has a couple of tutorials and a very good API documentation.

Read them thoroughly to understand the basics. You cannot expect to be able to use a tool without reading its instructions first.

edited Oct 21, 2011 at 21:19

answered Oct 21, 2011 at 20:59

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

tony Over a year ago

Exactly what I wanted to know. Unfortunately due to the time constraints for some deliverables I couldn't give JS and JQuery the time it deserved to through all the docs. Thank you for the links and I will sure go through them in the next few days.

Bakudan · Accepted Answer · 2011-10-21 20:52:29Z

1

Try this istructions

$(divarray[j]).find('.link').hide();
$(divarray[j]).find('a').remove('.link');

Try also

$(divarray[j]).find('.link:first').hide();

If you need to work only on the first element

Hope it helps

edited Oct 21, 2011 at 20:52

Bakudan

19.5k9 gold badges56 silver badges76 bronze badges

answered Oct 21, 2011 at 20:51

Matteo Conta

1,44913 silver badges18 bronze badges

Collectives™ on Stack Overflow

Accessing Objects inside HTML Object with JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related