收集通过jQuery的分割数据与for循环

这里是我的代码（什么我卡上是后跳）收集通过jQuery的分割数据与for循环

<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和取消注释警报以查看结果。

然而，我需要的是更进一步。我想只收集img标签，其data-item小于或等于变量countThisMany

所以finalString的最终结果将是“ID1的data-id; ID2，ID3，ID4; ID9，ID10，ID11; ID12" 。如果countThisMany改为2，举例来说，这将是“ID1，ID2，ID9，ID10”

我感觉好像我是如此接近但我无法弄清楚如何只收集第一第一组8张图像中的4张和第二组8张图像中的前4张。再次，图像的总量和我需要捕获的数量有所不同，因此“countThisMany”变种。

这是我第一次发布到惊人的计算器社区，所以我很兴奋！时间！

来源

2012-01-28 Scott J Freeman

使用filter方法

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

来源

2012-01-28 20:42:50 dfsq

+1 for parseInt。不过，不要忘记基数参数。 – Tomalak 2012-01-28 20:43:43

经过进一步调查，我意识到这是最好的答案，它适合我需要的非常好。小提琴：http://jsfiddle.net/5yNbE/6/ 谢谢！ – 2012-01-28 22:50:32

@Tomalak - 我调查了radix参数，并不知道如何将它包含在我拥有的parseInt中。这将是X在下面，对吗？：parseInt（x，$（this）.data（“item”）） - 但在我的情况下，我不确定我需要放什么，因为我不完全确定基数是什么。 – 2012-01-29 15:03:08

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(',')的结果。

来源

2012-01-28 20:39:18 Tomalak

使用$.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(';');

来源

2012-01-28 20:58:12

非常感谢！这正是我所期待的。 – 2012-01-28 22:24:10

收集通过jQuery的分割数据与for循环

回答

相关问题