如何分别将类附加到每个元素？

Question

我有一个4个箱子的列表，每个箱子有两个部分.content-primary-wrapper和.content-secondary-wrapper，里面这两个部分都是一个叫做.content-inner的div。我正在运行一个基于content-inner类的高度的条件来决定哪一个获得边界类添加到它。

正如我现在所说，函数运行，然后将结果应用于所有类，我如何才能将它应用于元素的基础上？我想获得它，所以它的工作原理是这样的：

1. 运行功能，确定第一要素的高度
2. 确定第一要素
3. 的高度应用边框类此元素仅
4. 冲洗和重复对于其他3个对象

这是我正在使用的脚本，任何想法如何我可以通过这些循环？

var primary_height = $('.content-primary-wrapper .content-inner').height(); 

var secondary_height = $('.content-secondary-wrapper .content-inner').height(); 

if (primary_height >= secondary_height){ 
    $(this).find('.content-primary-wrapper .content-inner').addClass('add-border-right'); 
} else { 
    $(this).find('.content-secondary-wrapper .content-inner').addClass('add-border-left'); 
} 

Answer 1

这是你要去的吗？循环浏览所有框，找到每个框中的.content-inner，并应用您的课程。

$(".box").each(function() { 
 
    var $pri = $(this).find(".content-primary-wrapper .content-inner"), 
 
     $sec = $(this).find(".content-secondary-wrapper .content-inner"); 
 
    if ($pri.height() >= $sec.height()) { 
 
    $pri.addClass("add-border-right"); 
 
    } else { 
 
    $sec.addClass("add-border-left"); 
 
    } 
 
});

.box { 
 
    float: left; 
 
    clear: both; 
 
} 
 

 
.add-border-left { 
 
    border-left: 1px solid red; 
 
} 
 
.add-border-right { 
 
    border-right: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="content-primary-wrapper"> 
 
    <div class="content-inner">two<br>lines</div> 
 
    </div> 
 
    <div class="content-secondary-wrapper"> 
 
    <div class="content-inner">one</div> 
 
    </div> 
 
</div> 
 

 
<div class="box"> 
 
    <div class="content-primary-wrapper"> 
 
    <div class="content-inner">one</div> 
 
    </div> 
 
    <div class="content-secondary-wrapper"> 
 
    <div class="content-inner">two<br>lines</div> 
 
    </div> 
 
</div>

Answer 2

有多种方法可以做到这一点。另外

$('.box-container').each(function(index, container) { 
    var primary_height = $('.content-primary-wrapper .content-inner', container).height(); 
    var secondary_height = $('.content-secondary-wrapper .content-inner', container).height(); 
    // ... 
} 

，如果你确定他们是：我可能会运行一个选择，以获得包含四个盒子中的元素，然后在它们上面运行的主要和次要包装定位查询，像这样总是要配对这样，你可以简单地这样做：

var primary_elements = $('.content-primary-wrapper .content-inner'); 
var secondary_elements = $('.content-secondary-wrapper .content-inner'); 
var i; 

for (i = 0; i < primary_elements.length; ++i) { 
    var primary_height = $(primary_elements[i]).height(); 
    var secondary_height = $(secondary_elements[i]).height(); 
    // ... 
} 

这个版本似乎有点不太可靠的我，万一你开始删除一个或在某些点上其他元素，他们是不再总是以这种假设的方式配对。