Сбор сегментированных данных через jQuery с циклами FOR

Question

Вот мой код (после прыжка я застрял)

<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var countThisMany = 4; //how many data-id's I want to count per "section" of images
var finalString = "";  //blank var to be used later, must be defined here.
</script>

<img src="foo.jpg" data-id="id1" data-item="1" />    // just a bunch
<img src="foo.jpg" data-id="id2" data-item="2" />    // of images with
<img src="foo.jpg" data-id="id3" data-item="3" />    // data-* usage to
<img src="foo.jpg" data-id="id4" data-item="4" />    // store two bits
<img src="foo.jpg" data-id="id5" data-item="5" />    // of information
<img src="foo.jpg" data-id="id6" data-item="6" />    // that I'll need
<img src="foo.jpg" data-id="id7" data-item="7" />    // to extract
<img src="foo.jpg" data-id="id8" data-item="8" />    // later on below.

<img src="bar.jpg" data-id="id9" data-item="1" />    // another set of images
<img src="bar.jpg" data-id="id10" data-item="2" />
<img src="bar.jpg" data-id="id11" data-item="3" />
<img src="bar.jpg" data-id="id12" data-item="4" />
<img src="bar.jpg" data-id="id13" data-item="5" />
<img src="bar.jpg" data-id="id14" data-item="6" />
<img src="bar.jpg" data-id="id15" data-item="7" />
<img src="bar.jpg" data-id="id16" data-item="8" />

<script type="text/javascript">
var item_array = $("img").map(function() {
    return $(this).attr("data-item");
}).get();

//alert(item_array);
//returns "1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8"


var id_array = $("img").map(function() {
    return $(this).attr("data-id");
}).get();
//alert(id_array);
//returns "id1,id2,id3,id4,id5,id6,id7,id8,id9,id10,id11,id12,id13,id14,id15,id16"


for (i=0;i<countThisMany;i++){
finalString=finalString+id_array[i]+';';
}

//alert(finalString);
//returns "id1;id2;id3;id4" -- could be more or less if "countThisMany" is changed to something other than 4 

</script>

Весь этот код является автономным, поэтому не стесняйтесь сохранять его в виде HTML и раскомментировать предупреждения, чтобы увидеть результаты.

Однако мне нужен шаг вперед. Я хотел бы собрать только data-id тегов img, чьи data-item меньше или равны переменной countThisMany

Таким образом, конечным результатом finalString будет «id1; id2; id3; id4; id4; id9; id10; id11; id12». Например, если countThisMany изменить на 2, это будет "id1; id2; id9; id10"

Мне кажется, что я так близко , но я не могу понять, как собрать только первые 4 из первого набора из 8 изображений и первые 4 из второго набора из 8 изображений , Опять же, общее количество изображений и сколько мне нужно будет сделать снимок, поэтому отсюда и «countThisMany» var.

Это мой первый пост в удивительном сообществе stackoverflow, поэтому я взволнован! Спасибо всем участникам заранее!

Answer 1

Использование filter метод

var item_array = $("img").filter(function() {
    return parseInt($(this).data("item")) <= countThisMany;
}).map(function() {
    return $(this).data('id');
}).get();

Answer 2

Используйте $.grep в сочетании с $.map. Я также добавил join к массиву, а не к циклу. скрипка: http://jsfiddle.net/brentmn/5yNbE/5/

var countThisMany = 2;
var finalString = "";

var id_array = $.grep($('img'), function(item) {
    return ($(item).data('item') <= countThisMany);
}).map(function(item) {
    return $(item).data('id')
});

finalString = id_array.join(';');

Answer 3

var countThisMany = 4;
var item_array = $("img")
    .filter(function() {
       return parseFloat( $(this).attr("data-item") ) <= countThisMany;
    })
    .map(function() {
       return $(this).attr("data-id");
    })
    .toArray(); /* instead of get() */

Обратите внимание, что это вернет массив.Кажется, вам нужна строка, поэтому вы можете вызвать .join(',') для результата.