How do I assign the HTML of each child to a variable in jQuery?

Question

For example, I have

<li>
    <div class="hide video_id keep">50</div>
    <div class="hide video_id keep">49</div>
</li>

And I want 50 and 49 each stored in a variable. I'm not sure how many of those divs there are, but I will need it to work for each one. Is there any easier way to accomplish this besides using a for loop?

Just for context, I am using these values to remove video thumbnails from the DOM (which is why I added the "keep" class for thumbnails I will not remove).

Update: Here is the code I am using for filtering the videos when a category is clicked.

$('.category').click(function() {
    $(this).children().addClass('keep');
    var numbers = [];
    $(".video_id:not(.keep)").each(function () {
        numbers.push($(this).text());
    });
    console.log(numbers);
    $('.thumbnails:gt(8)').remove();
    updatePaginate();
});

i think in jQuery $.each is way to go ... – Bojan Kovacevic Mar 07 '13 at 07:51 — Bojan Kovacevic, Mar 07 '13 at 07:51
Use a loop and push them onto an array. – Barmar Mar 07 '13 at 07:51 — Barmar, Mar 07 '13 at 07:51

Christofer Eliasson · Accepted Answer · 2013-03-07T08:05:43.363

1

If I understand you correct, you want to select the numbers so that you can delete those images, but you don not want to delete those that has the keep class. In that case you could select all elements that have the video_id and ignore those that has the keep class (using the :not selector), and then use .each() to loop over them and read their content one at a time. You could then push the content onto an array. Something like this:

var numbers = [];
$(".video_id:not(.keep)").each(function () {
   numbers.push($(this).text());
});
console.log(numbers);

Working demo

edited Mar 07 '13 at 08:05

answered Mar 07 '13 at 07:54

Christofer Eliasson

32,939
7
74
103

Awesome, thanks! I read in another thread that setting an array length to 0 would clear the array but it doesn't seem to do that. This function is run when a category is clicked. They filter the video selection. Code: $('.category').click(function() { $(this).children().addClass('keep'); var numbers = []; numbers.length = 0; $(".video_id:not(.keep)").each(function () { numbers.push($(this).text()); }); console.log(numbers); $('.thumbnails:gt(8)').remove(); updatePaginate(); }); – theintellects Mar 07 '13 at 08:06
@theintellects My pleasure! Setting the length of the array to zero should indeed clear it. Here is [an example](http://jsfiddle.net/JJ3sZ/2/) that does so. – Christofer Eliasson Mar 07 '13 at 08:09
One last question: How do I remove $('thumbnails video_id') elements that do not contain this text? I have added an example of one of these elements to the HTML in http://jsfiddle.net/JJ3sZ/4/? Thanks again! – theintellects Mar 07 '13 at 08:21
@theintellects I've made [a new example](http://jsfiddle.net/JJ3sZ/5/), that I think solves your problem. Notice that I've also edited the selector to select the elements that you want to keep, instead of those that you want to delete. Then I loop over each thumnail, look if its ID is within the list of thumbnails to keep, and if not we remove it. Also notice that `.indexOf()` was not supported in IE8. For my example to work on IE8 as well, you need to add [this](http://stackoverflow.com/a/3629211/678801) piece of code. – Christofer Eliasson Mar 07 '13 at 08:49
Oh one key component I left out: I need to restore the videos so when another category is selected, we have all the videos and remove the ones without class keep. I don't think I can add them back in again after having removed them from the DOM? I'm thinking of just applying the class hide to the thumbnails div, then removing the class from IDs we want to keep. http://jsfiddle.net/JJ3sZ/10/ – theintellects Mar 07 '13 at 16:34

score 0 · Answer 2 · answered Mar 07 '13 at 07:52

0

$(function() {
    $('div','li').each(function() {
        console.log($(this));
    });
});

answered Mar 07 '13 at 07:52

Imperative

3,138
2
25
40

score 0 · Answer 3 · answered Mar 07 '13 at 07:53

0

var values = [];

$("div.keep").each(function(){
 values[values.length] = $(this).text();
});

answered Mar 07 '13 at 07:53

K D

5,889
1
23
35

score 0 · Answer 4 · answered Mar 07 '13 at 07:54

0

Not sure what exactly you want to achieve, but you might use .map method:

var arr = $('div.keep').map(function() { return $(this).text(); }).get();

This will form an array which contains your elements text.

answered Mar 07 '13 at 07:54

Igor Dymov

16,230
5
50
56

How do I assign the HTML of each child to a variable in jQuery?

4 Answers4