通过带有 FOR 循环的 jQuery 收集分段数据

Posted 2023-05-09

【中文标题】通过带有 FOR 循环的 jQuery 收集分段数据

【英文标题】：Gathering segmented data via jQuery with FOR loops

【发布时间】：2012-02-21 07:57:39

【问题描述】：

这是我的代码（我卡在跳转之后）

<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-item 小于或等于变量countThisMany 的img 标签中的data-id

所以finalString 的最终结果将是“id1;id2;id3;id4;id9;id10;id11;id12”。如果countThisMany 更改为 2，例如，它将是 "id1;id2;id9;id10"

我觉得我好像如此接近，但我不知道如何只收集第一组 8 张图像中的前 4 张，以及第二组 8 张中的前 4 张图片。同样，图像的总量和我需要捕获的数量各不相同，因此是“countThisMany”变量。

这是我在惊人的 *** 社区的第一篇文章，所以我很兴奋！提前感谢所有贡献者！

【参考方案1】：

使用filter方法

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

【讨论】：

进一步调查后，我意识到这是最好的答案，它非常适合我的需要。小提琴：jsfiddle.net/5yNbE/6 谢谢！

@Tomalak - 我查看了 radix 参数，但不知道如何将它包含在我拥有的这个 parseInt 中。下面是 X，对吧？： parseInt(x,$(this).data("item")) - 但就我而言，我不确定我需要放什么，因为我是不完全确定基数的作用。

@dfsq，谢谢——那么 10 只是一个任意数字吗？或者它的目的是什么？

@Scott 表示“以 10 为底”（即十进制数）。如果你不使用它，parseIn('010') 将被解释为八进制，给出8。这可能会导致意外的错误。 parseInt('010', 10) 给 10。请注意，parseFloat() 始终以 10 为基数。

【参考方案2】：

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

【参考方案3】：

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

【讨论】：

非常感谢！这正是我想要的。