如果前一个 div 没有相同的类属性，则检查每个 div [关闭]答案

【问题标题】：check for every div if the previous div isn't having the same class attribute [closed]如果前一个 div 没有相同的类属性，则检查每个 div [关闭]
【发布时间】：2015-12-31 12:08:07
【问题描述】：

所以我的代码如下所示：（随机生成）

<div class="class1"> </div>
<div class="class2"> </div>
<div class="class1"> </div>
<div class="class1"> </div>
<div class="class2"> </div>
<div class="class1"> </div>
<div class="class1"> </div>
<div class="class1"> </div>
<div class="class2"> </div>

现在我想检查每个 div 是否前一个 div 没有相同的类属性

我想实现这样的目标：

<div class="class1"> </div> <!-- first div: nothing happens-->
<div class="class2"> </div> <!-- previous div has other class: margin-top:10px;-->
<div class="class1"> </div> <!-- previous div has other class: margin-top:10px;-->
<div class="class1"> </div> <!-- same class: nothing happens-->
<div class="class2"> </div> <!-- previous div has other class: margin-top:10px;-->
<div class="class1"> </div> <!-- previous div has other class: margin-top:10px;-->
<div class="class1"> </div> <!-- same class: nothing happens-->
<div class="class1"> </div> <!-- same class: nothing happens-->
<div class="class2"> </div> <!-- previous div has other class: margin-top:10px;-->

我认为我需要循环每个 div 并检查前一个 div 是否具有相同的类或类似的东西

我真的希望现在能更好地理解。 :)

【问题讨论】：

HTML 代码应该按原样添加，而不仅仅是伪代码。举例说明具有相同类的div 相互之间。另外，添加您解决问题的尝试。这里需要php吗？
如果有重复的类，你想怎么办？应用样式，用 jQuery 做点什么？
“彼此之间”是什么意思？
@Tushar 好的，我现在试图更好地解释它。很难为我描述它，对不起。
@BrettDeWoody DeWoody DeWoody 我编辑了这个问题，现在可能更容易理解了。

标签： javascript css

【解决方案1】：

//iterate over the divs
$('div[class^="class"]').each(function(){
    //get the previous div with correct class
    var prev = $(this).prev('div[class^="class"]');
    //if there's a previous element and it doesn't match the class
    if(prev.length > 0 && !$(this).hasClass(prev.prop('class'))){
        //add the margin
        $(this).css('margin-top', '10px');
    };
});

【讨论】：

【解决方案2】：

我认为以下应该可行。保持对上一课的引用。迭代所有以^= 开头的div，检查prev 类是否与我们正在循环的元素的类匹配，然后应用我们的margin top。最后，将前一个类设置为当前元素的类，以便在下一次迭代时进行比较。

var prev_class;

$('div[class^="class"]').each(function(){
    var $this = $(this);

    if(prev_class == $this.prop('class')){
        $this.css('margin-top', '10px');
    }

    prev_class = $this.prop('class');
});

【讨论】：

【解决方案3】：

使用 jquery 的 next() 和 prev() 和 hasClass()，你可以看到类的区别：

$("div").on("click", function()
{
  alert($(this).attr("class"));
  alert($(this).next().attr("class"));
  alert($(this).prev().attr("class"));
  alert($(this).next().hasClass("class1"));
  alert($(this).prev().hasClass("class1"));
});

.class1
{
  width:100%;
  height:3rem;
  background:blue;
}
.class2
{
  width:100%;
  height:3rem;
  background:green;
}
.class3
{
  width:100%;
  height:3rem;
  background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1"></div>
<div class="class1"></div>
<div class="class2"></div>
<div class="class1"></div>
<div class="class3"></div>

【讨论】：

您可以使用each() 函数进一步迭代元素，如@Ohgodwhy 所示。请记住 next 和 prev 参考当前项目 silbings。