如何在 jQuery 中选择每对 2 个连续元素？

Question

谁能帮我弄清楚如何实现以下目标？我有一组未知大小的 div。每个 div 都有一个 .feature 类。我需要运行一个 jQuery 脚本来查找所有具有 .feature 的 div，然后将所有子项查找为一系列对。然后每一对将被提交给另一个 jQuery 函数。

例如：

1. <div.feature/>
2. <div.feature/>
3. <div.feature/>
4. <div.feature/>
5. <div.feature/>

结果应该是 1+2 和 3+4 配对在一起，这样我就可以在每个单独的集合上调用另一个 jQuery 函数。

我知道我可以简单地将每一对包装在一个外部 div 中，然后找到每个包装 div 的子级，但我想尽可能避免更改标记。

Answer 1

var pairs = [];
$('div.feature').each(function(i, div) {
  var i_over_2 = Math.floor(i / 2);
  if (!pairs[i_over_2]) pairs[i_over_2] = $();
  pairs[i_over_2] = pairs[i_over_2].add(div);
});
$.each(pairs, function(i, p) {
  p.doSomethingToAPair();
});

这个想法是建立一个jQuery对象数组。

edit 看起来像 1.4 添加了“$()”来获取一个空的 jQuery 对象。

再次编辑 durr Javascript 有浮动 :-)

嘿@Adam：如果我们有这个 jQuery 扩展（当然这是一个玩具版本）：

jQuery.fn.zip = function(s) {
  var o = $(s);
  return this.map(function(i, e) {
    return $(e).add($(o[i]));
  });
};

然后我们可以像这样构建“pairs”数组：

var pairs = $('div.feature:even').zip('div.feature:odd');

Answer 2

想法

$('div.feature:even').each(function(){
  var t = $(this);
  var paired = t.add( $('div.feature:eq('+(t.index()+1)+')', t.parent()) );
  //add to array, call function...
}

可能需要稍作调整才能为您工作 - 它未经测试。

预览

http://jsbin.com/okize/7

Answer 3

让我们跳到假设您可以修复 HTML 以使其有效，它看起来像：

<div class='feature'></div>
<div class='feature'></div>
<div class='feature'></div>
<div class='feature'></div>
<div class='feature'></div>
<div class='feature'></div>

然后您可以使用如下选择器：

$("div:odd")

或

$("div:even")

更像：

$("div:even").children(':even');

注意：基于 0 的索引，所以 2,4 等（正常计数）是奇数...

Answer 4

我使用此代码将一组 div 格式化为一个两列表：

$('.feature:even').each(function () {
    $(this).add($(this).next()).wrapAll("<tr>");
});
$('.feature').wrap('<td>');
$('tr').wrapAll('<table>');

Answer 5

这是我用于博客元素的解决方案，但我认为它可以应用于这个问题，希望对你有所帮助，我有一个元素列表，每个 li 元素都有两个 div元素，我想要的是每 2 个元素的步骤中应用相同的样式，我的意思是，1+2 相同样式和 3+4 其他样式等等，5+6 与 1+2 相同的样式。这就是我所做的。

HTML

<ul>
  <li>
    <div class="photo">PHOTO</div>
    <div class="text">TEXT</div>
  </li>
  <li>
    <div class="photo">PHOTO</div>
    <div class="text">TEXT</div>
  </li>
  <li>
    <div class="photo">PHOTO</div>
    <div class="text">TEXT</div>
  </li>
  <li>
    <div class="photo">PHOTO</div>
    <div class="text">TEXT</div>
  </li>
  <li>
    <div class="photo">PHOTO</div>
    <div class="text">TEXT</div>
  </li>
  <li>
    <div class="photo">PHOTO</div>
    <div class="text">TEXT</div>
  </li>
  <li>
    <div class="photo">PHOTO</div>
    <div class="text">TEXT</div>
  </li>
  <li>
    <div class="photo">PHOTO</div>
    <div class="text">TEXT</div>
  </li>
</ul>

Javascript

var row = 0;
$( "li" ).each(function( index ) {
  // Here is when you loop every two elements
  if ( index % 2 == 0)
  {
    if (row % 2 == 0 )
    {
      //console.log("index "+index + " row" + row);
      first_element = $( "ul li:eq("+index+")" ).addClass( "blue-bg" );
      second_element = $( "ul li:eq("+(index+1)+")" ).addClass( "blue-bg" );
      $(first_element).find('.photo').addClass( "pull-left" );
      $(first_element).find('.text').addClass( "pull-right" );
      $(second_element).find('.photo').addClass( "pull-left" );
      $(second_element).find('.text').addClass( "pull-right" );
      row = 1; // make row value odd
    }
    else
    {
      //console.log("index "+index + " row" + row);
      third_element = $( "ul li:eq("+index+")" ).addClass( "red-bg" );
      four_element = $( "ul li:eq("+(index+1)+")" ).addClass( "red-bg" );
      $(third_element).find('.photo').addClass( "pull-right" );
      $(third_element).find('.text').addClass( "pull-left" );
      $(four_element).find('.photo').addClass( "pull-right" );
      $(four_element).find('.text').addClass( "pull-left" );
      row = 0;  // make row vale even
    }
  }
});

这是jsfiddle