Question

我有一个包含4个框的列表，每个框有.content-primary-wrapper和.content-secondary-wrapper两个部分，这两个部分中都有一个名为.content-inner的div。我正在运行一个基于content-inner类的高度的条件来决定哪一个是添加到它的边界类。

正如我现在所做的那样，函数运行，然后将结果应用于所有类，如何才能将它应用于元素？我试图得到它所以它的工作原理如下：

运行功能，确定第一个元素的高度
确定第一个元素的高度
仅将边框类应用于此元素
冲洗并重复其他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();
    // ...
}

这个版本对我来说似乎不那么健壮，以防万一你在某个时刻开始删除一个或另一个元素，并且它们不再总是以这种假设的方式配对。

如何单独为每个元素附加一个类？

2 个答案: