CODEWITHSUNDEEP
javascriptjquerydom
tony
tony

Reputation: 160

Accessing Objects inside HTML Object with JS

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();
    }

Upvotes: 1

Views: 156

Answers (2)

Felix Kling
Felix Kling

Reputation: 817198

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.

Upvotes: 3

Matteo Conta
Matteo Conta

Reputation: 1449

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

Upvotes: 1

Related Questions