jquery each() 不识别 $(this)

Question

我正在尝试创建一个列高均衡器，如果它是页面上的唯一实例，但如果有多个实例，则脚本似乎忽略了 each(){function 中的 $(this)。

这是 HTML：

    <div class="equalizer" data-cols="2">

        <div class="equalized ">Content</div>
        <div class="equalized ">Content</div>
        <div class="equalized ">Content</div>
        <div class="equalized ">Content</div>

    </div>

还有 jQuery：

    $(".equalizer").each(function() { 
        var colClass = 'eq-col-'+$(this).data("cols");
        var height = parseInt($(this).css('height'));

        $(this).children().each(function() {
            $(this).css('height',height + 'px');
            $(this).addClass(colClass);
        });     
    });

这是似乎被多个实例忽略的行： var height = parseInt($(this).css('height'));它的目的是获取该实例的包装器.equalizer 的高度，然后将其设置为每个子equalized 的高度。

脚本似乎正在从页面上最高的 equalizer 包装器获取高度，并将页面上所有 equalized 子级的高度设置为等于该高度，无论它位于哪个包装器中......我'已经搞砸了几个小时，我很茫然......任何帮助将不胜感激。

Answer 1

我看到了你的问题。这是你可以做的。

$(".equalizer").each(function() {
  var colClass = 'eq-col-' + $(this).data("cols");
  //Get all the children height 
  var heights = $(this).children().map(function() {
    return $(this).height();
  });
  //extract max out of the children
  var height = Math.max.apply(Math, heights);

  $(this).children().each(function() {
    $(this).css('height', height + 'px');
    $(this).addClass(colClass);
  });
});

.equalized {
  border: 1px solid red;
}
.equalized {
  margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="equalizer " data-cols="2">

  <div class="equalized ">

    <div>Sample Content
    </div>
    <div>Sample Content
    </div>

  </div>
  <div class="equalized ">Content</div>
  <div class="equalized ">Content</div>
  <div class="equalized ">Content</div>

</div>

<div class="equalizer" data-cols="2">

  <div class="equalized ">Content1</div>
  <div class="equalized ">Content3</div>


</div>

Answer 2

Jquery 每个函数还为您提供索引和项目，因此您可以直接访问当前项目，而无需使用它。 Jquery Each Document

$(".equalizer").each(function(index,item) { 
        var colClass = 'eq-col-'+$(item).data("cols");
        //var height = parseInt($(item).css('height'));
          var height = $(item).height();
        $(item).children().each(function(i,child) {
           // $(child).css('height',height + 'px');
              $(child).height(height);
            $(child).addClass(colClass);
        });     
    });

还有你解析高度的原因，当你可以直接分配它时......另外我认为你不需要添加 +'px'

Answer 3

或者，您也可以在没有 javascript 的情况下执行此操作。您可以将 display:table 用于容器，将 display:table-cell 用于儿童，而不是以编程方式设置高度。

这是MDN 上的显示文档

.equalized {
  border: 1px solid red;
  margin: 2px;
}
.equalizer {
  display: table;
}
.equalized {
  display: table-cell;
}

<div class="equalizer " data-cols="2">

  <div class="equalized ">

    <div>Sample Content
    </div>
    <div>Sample Content
    </div>

  </div>
  <div class="equalized ">Content</div>
  <div class="equalized ">Content</div>
  <div class="equalized ">Content</div>

</div>

<div class="equalizer" data-cols="2">

  <div class="equalized ">Content1</div>
  <div class="equalized ">Content3</div>


</div>