我有一个情况,我有一个数据列表要在各个面板中显示,使用Bootstrap的网格系统,我想利用宽屏幕并水平显示几个面板,但在狭窄的屏幕上有它们堆叠.我目前正在服务器端放置这样的ejs,将列作为查询参数传入,通常设置为2或3,因此每个colClass都是col-sm-6或col-sm-4.

<% var colWidth = 12/columns; var colClass = "col-sm-" + colWidth; %>
<% for(var i=0; i<contestData.classData.length; i++) {%>
    <% if ((classCount % columns) == 0) { %>
        <div class="row">
    <% } %>
    <div class="<%= colClass %>">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title"> <%= contestData.classData[i].name %> </h3>
            </div>
            <div>...</div>
        </div>
    </div>
    <% classCount++ %>
    <% if ((classCount % columns) == 0) { %>
        </div>
    <% } %>
<% } %>

这样做有效,但是在服务器端进行这种级别的布局会让我感到冒犯,我真的宁愿用Angular来做这件事,但是我无法弄清楚如何在div中使用class = row包装适当数量的面板-repeat甚至ng-repeat-start ="matchData.classData中的classData"

谢谢!

假设我有一组服务对象

services: [{title: title, caption: caption},{title: title, caption: caption},{title: title, caption: caption},{title: title, caption: caption}]

最终结果是一个映射数组，每两个元素在它自己的 div 中。

<div>
 <div>services[0]</div>
 <div>services[1]</div>
</div>
<div>
 <div>services[2]</div>
 <div>services[3]</div>
</div>

我无法理解我将如何实现这一目标？按每两个元素映射和拆分数组？将数组拆分为两个数组，然后映射？到凌晨了吗？是的。

我很抱歉发布此消息，因为我可以看到许多与此类似的问题已被问过多次。以下是那些几乎帮助我的人 - 以及为什么他们没有：

• 这是因为计算不应该在渲染中完成，而应该在方法/计算部分完成。那对我没有帮助。
• 这个使用两个不同的模板，v-if在模板标签上写上。就我而言，这似乎很愚蠢，因为这两个模板 98% 相同。
• 这篇Medium 文章解决了一个与我非常接近的问题。但是， - 在他的情况下，这是对用户的过滤（通过计算属性解决），而不是在特定迭代中插入代码片段的 if 子句（这就是我认为我正在寻找的）。

问题

我有一个从 API 中提取的项目列表，因此数量会发生变化。我希望它们显示在两列中：

-----------------
| Item1   Item5 |
| Item2   Item6 |
| Item3   Item7 |
| Item4         |
-----------------

我正在使用循环遍历它们v-for。

我的尝试

1. 使用纯 CSS display: flex

但这只能做到这一点：

-----------------
| Item1   Item2 |
| Item3   Item4 |
| Item5   Item6 |
| Item7         |
-----------------

2. 使用 CSS 与 column-count: 2;

但是，列中间元素，问候display: block; overflow: hidden;和许多其他尝试的中断。应该说，这些元素的高度可以变化。

3. 所以我放弃了使用 CSS …

我有阵列: [1,2,3,4,5,6,7]

我想实现: [[1,2], [3,4], [5,6], [7]]

我在想Array.map,但它似乎无法映射到任何元素？

我有(使用Underscorejs):

arr.map(function(el, idx, arr) {
  if (idx%2 != 0) return null;
  if (idx == arr.length-1) return [el];
  return [el, arr[idx+1]]
}).compact();

这仍然有点难看.如何实现转换(没有显式循环)？

有没有办法将ImmutableJS列表分成多个列表的列表？我基本上都在寻找类似lodash的块,但是对于ImmutableJS列表.

我可以改变我的名单为Array它传递给前块和转换回ImmutableJS列表中的反应,但有人告诉我浅薄的转换效率不高,我的名单是相当大的.

谢谢你,G.

[

我正在尝试使用用户设置查询后期集合，但设置是一个包含 10 多个元素的数组，并且没有返回任何内容。我知道文档确实提到了 10 个元素的限制，有人知道解决方法吗？

firebaseApp.collection('posts')
            .where("newTag", "in", mySettings)
            .get()
let array = [];
        posts.forEach((post) => {
            array.push(post.data());
        });

dispatch({ type: ActionTypes.GET_POSTS, payload: array });

可能重复:将
数组拆分为块

我试图将值数组转换为新的配对值数组.

例如,我需要转换:

var arr = [1,2,3,4,5,6,7,8];

成:

arr = [[1,2], [3,4], [5,6], [7,8]];

我尝试使用jQuery的.map()方法,但这对我不起作用:

arr= $.map(arr, function(n, i){
return [n + ',' + n[ i + 1 ]];
});

我遇到了这个逻辑的问题,因为react/jsx不允许将非关闭标记添加到数组/子组件中.例如,使用bootstrap css我想为每 4列添加一行.

所以逻辑如下:

在ex:中添加一个开始行<div className="row">,然后在该行内循环,每个循环追加一列ex:<div className="column>{this.data}</div>当循环达到4时检查if(i % 4 == 0)并添加一个结束</div>标记,同时添加新的行标记<div className="row">;

下面的代码可以使用另一种语言,但是在反应中这是不可行的,因为我们推送一个结束标记和一个开始标记(这是无效的jsx):

generateColumns(columns) {
 let newColumns = [];

 columns.forEach(function(column, idx) {
  newColumns.push( <div className="column"> some data </div> );

  if (idx % 4 == 0) {
   // Here we end the row and start a new row, works in any other language.
   newColumns.push( </div> <div className="row"> );
  }
 });

 // This array now has the proper tags …

我有一个包含图像列表的xml文件,我希望将这些图像加载到容器中然后应用砌体.

我试图等待图片加载,http://masonry.desandro.com/demos/images.html.每次添加图片后我都会尝试重新加载 - http://masonry.desandro.com/docs/methods.html#reload

这些都不起作用.

这是我的代码,我不知道我哪里出错了.

    $('.content').masonry();
    var elements = '';


    $.ajax({
        type: "GET",
        url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file
        dataType: "xml",
        success: function(xml) {
            jQuery(xml).find('img').each(function(i) {
               var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images
               var url = jQuery(this).attr('src');
               var alt = jQuery(this).attr('alt');

            elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'"/></div>';

        });

        $('.content').append(elements).shuffle().masonry('reload');
        //$(".content .image-div").shuffle();
        }
     });

我看过这个 - jquery,在追加完成之后的砌体和 这个jQuery Masonry和Ajax追加项目？

我只是想知道重载是否应该插件等待图片加载？如果是这样的话语法是什么？

我还计划隐藏块(可见性:隐藏),将它们随机排列,然后将它们砌成,然后将它们淡入. …

我编写了一个函数,它接受两个参数:(1)一个数组,(2)块的大小.

function chunkArrayInGroups(arr, size) {

  var myArray = [];

  for(var i = 0; i < arr.length; i += size) {
    myArray.push(arr.slice(i,size));
  }

  return myArray;
}

我想将这个数组拆分成给定大小的块.

chunkArrayInGroups(["a", "b", "c", "d"], 2)  

应该回来:[["a", "b"], ["c", "d"]].

我回来了: [["a", "b"], []]