Question

Having trouble with each function… Will try to explain by example…

In my code, there is DIV with id “media-type-container-1”, with content that changes “live”, in runtime:

<div id="media-type-container-1">
    <div><input type="checkbox">Media 11<span id="media-stations-id-11" class="media-stations-id">11</span></div>
    <div><input type="checkbox">Media 12<span id="media-stations-id-12" class="media-stations-id">12</span></div>
</div>

If it changes, it can be chnanged to ie:

<div id="media-type-container-1">
    <div><input type="checkbox">Media 13<span id="media-stations-id-13" class="media-stations-id">13</span></div>
    <div><input type="checkbox">Media 14<span id="media-stations-id-14" class="media-stations-id">14</span></div>
</div>

To get a list of all “media-stations-id” I use following code:

$("#add-to-filter-stations").live("click", function() {

    var selectedMediaStations = new Array();
    selectedMediaStations.length = 0;

    $('#media-type-container-1').each(function(){
        $('.media-stations-id').each(function(){
            selectedMediaStations.push($(this).attr('id').replace("media-stations-id-", ""));
        })
    });
}

In mentioned example, array selectedMediaStations get elements 11, 12, 13 and 14, instead of only 13 and 14.

What I’m doing wrong, so I cannot “start” with empty array every time with live function?

Answer 1

Why don’t you try something like

var selectedMediaStations = $('.media-stations-id').map(function(){
    return $(this).attr('id').replace('media-stations-id-','');
});

// [13, 14]