1

我想检测容器中是否存在重复的 div 类。然后我想检测该 div 类是否位于另一个 div 类之前。如果是这样，那么我想将该 div 移动到另一个 div 之后。

 <div class="container"> 
   <div class="column1">
   <div class="column2">
 </div>

 <div class="container"> 
   <div class="column1">
   <div class="column2">
 </div>

 <div class="container"> 
   <div class="column2">
   <div class="column1">
 </div>

因此，在上面的示例中，我希望检测第 1 列是否存在以及它是否位于第 2 列之前或之后。

如果它位于第 2 列之前，我想将其移动到第 2 列之后。

我试图确定divs 的长度/索引，但无济于事。这是我最近的尝试。我是新手，请jQuery原谅我：

$('.container').find('.column1').siblings().each(function(){
    var index = $(this).index();
    var index2 = $('column2').index();
    if (index > $('column2').index()){
      $(this).css('background','#000');
    } else {
      (this).css('background','#dedede');
    }

});
4

2 回答 2

3

这会将所有第 1 列放在第 2 列之后。您不需要检查该类是否存在，因为如果不存在，那么该insertAfter方法将什么也不做。这是大多数jQuery 方法和插件的行为。

// Loop through containers
$('.container').each(function() {
    // Place column1 after column 2
    $(this).find('.column1').insertAfter($(this).find('.column2'));
});

工作示例 - http://jsfiddle.net/h2CYX/

于 2013-08-19T13:31:43.550 回答
0

尝试这个：

$('.container').find('.column1').each(function(){
    var column1Index = $(this).index();
    var column2Index= $(this).siblings('column2').index();
    if (column1Index > column2Index){
      $(this).css('background','#000');
    } else {
      (this).css('background','#dedede');
    }

});
于 2013-08-19T13:31:57.603 回答