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中，然后找到每个包装器divs children，但我想尽可能避免更改标记。

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对象数组。

编辑看起来像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]));
  });
};

然后我们可以像这样建立“对”数组：

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等（正常计数）是ODD ...

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

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

5 个答案:

主意

预览