Here's my code (what I'm stuck on is after the jump)
<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>
This entire code is self-contained so feel free to save it as an HTML and uncomment the alerts to see the results.
What I need, however, is a step further. I would like to only collect the data-id of the img tags whose data-item are less than or equal to the variable countThisMany
So the end result of finalString would be "id1;id2;id3;id4;id9;id10;id11;id12". And if countThisMany was changed to 2, for instance, it would be "id1;id2;id9;id10"
I feel as though I am so close but I can't figure out how to only gather the first 4 of the first set of 8 images, and the first 4 of the second set of 8 images. Again, the total amount of images and how many I would need to capture vary, hence the "countThisMany' var.
This is my first post to the amazing stackoverflow community, so I'm excited! Thanks to all contributors ahead of time!
Use filter method
ReplyDeletevar item_array = $("img").filter(function() {
return parseInt($(this).data("item")) <= countThisMany;
}).map(function() {
return $(this).data('id');
}).get();
var countThisMany = 4;
ReplyDeletevar item_array = $("img")
.filter(function() {
return parseFloat( $(this).attr("data-item") ) <= countThisMany;
})
.map(function() {
return $(this).attr("data-id");
})
.toArray(); /* instead of get() */
Note that this will return an array. You seem to want a string, so you might want to call .join(',') on the result.
Use $.grep in combination with $.map. I also added a join to array rather than the loop. fiddle: http://jsfiddle.net/brentmn/5yNbE/5/
ReplyDeletevar 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(';');