for-loop/.each 中的控制元素答案

【问题标题】：Controlling elements in for-loop/.eachfor-loop/.each 中的控制元素
【发布时间】：2018-08-22 06:06:39
【问题描述】：

在 jQuery 中，检索到许多元素后，我使用 .each 循环遍历它们，然后将它们吐出到画布上。但是，我需要控制组中的元素，以便在 100 个元素中，有 10 个会得到某个值，另外 10 个会得到一组不同的值，依此类推。

据我所知，我无法在 .each-loop 中保持这种级别的控制。没有函数说，对于检索到的第一个 x 数量的元素，执行此操作；剩下的，做点别的吧。

我应该如何控制元素？

一些代码示例：

function handleData(item) {
    var items = jQuery.parseJSON(item);

    var id = items[0].id;
    var something = items[0].something;

    $.each(items, function(key, value) {

        variableHolder[$counter-1] = value.id;
        variableHolder["intellect"] = value.intellect;

        my_obj[$counter] = example.library.text({

value: "something",
example: "one"

});

这是我需要控制的 $counter 变量。我想分批运行它。 counter 中的前 20 个元素获取一种类型的值，以此类推。

【问题讨论】：

请添加您目前尝试过的代码
使用slice(0, 10) 获取元素的子集。参考。 api.jquery.com/slice
我看不出如何在 .each 中将 slice 用于迭代变量。如果我弄错了，也许你可以举个例子？查看我的更新。
你能给我们举一个更好的例子吗？一个带有一些展示问题的虚拟元素的将是 wunderbar。
你不会在 inside 中使用它。你会在执行 each 之前使用它来控制你正在循环的内容

标签： jquery for-loop each

【解决方案1】：

您可以使用slice() 方法（参考http://api.jquery.com/slice/）方法获取要循环的元素子集，以执行您想要的任何操作。这将在每个典型的外部或之前完成。

【讨论】：

【解决方案2】：

你可以使用这样的分块函数（代码sn-p中的解释）

let chunk = ( arr, chunk = 1 ) => arr.reduce( ( acc, value, index, oArr, i = index + 1, s = oArr.slice.bind( oArr ), len = oArr.length ) => {
  ( i % chunk === 0 ) ? acc.push( s( i - chunk, i ) ): ( i === len ) && acc.push( s( i - ( i % chunk ), len ) );
  return acc;
}, [] );

chunk(array, chunk_size);

//chunking function
//get the array and size of chunks
//reduce the array.
//the reducer function chunks if index+1 modulus the size of the chunk is zero
//if it is it pushes the chunk of the array using slice. 
//if it is not it evaluates if it is the end of the array using a short-circuit AND( && )
//if it is the end of the array we push what we have left as its own chunk
//always returns the accumulated array.

let chunk = ( arr, chunk = 1 ) => arr.reduce( ( acc, value, index, oArr, i = index + 1, s = oArr.slice.bind( oArr ), len = oArr.length ) => {
  ( i % chunk === 0 ) ? acc.push( s( i - chunk, i ) ): ( i === len ) && acc.push( s( i - ( i % chunk ), len ) );
  return acc;
}, [] );


//grab all the elements and turn them into an array
let elements = Array.from( $(".random") );

//chunk the elements into arrays of 10, the remainder will be dumped into the last array.
//log out each array.
chunk(elements, 10).forEach((arr) => console.log(arr));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="random">1</div>
<div class="random">12</div>
<div class="random">3</div>
<div class="random">45</div>
<div class="random">6</div>
<div class="random">77</div>
<div class="random">88</div>
<div class="random">99</div>
<div class="random">1</div>
<div class="random">12</div>
<div class="random">3</div>
<div class="random">45</div>
<div class="random">6</div>
<div class="random">77</div>
<div class="random">88</div>
<div class="random">99</div>
<div class="random">000</div>
<div class="random">1</div>
<div class="random">12</div>
<div class="random">3</div>
<div class="random">45</div>
<div class="random">6</div>
<div class="random">77</div>
<div class="random">88</div>
<div class="random">99</div>
<div class="random">000</div>

【讨论】：