使用 .each 循环遍历 Backbone View 中具有相同类的元素

Looping through elements with the same class in Backbone View with .each?

本文关键字:同类 元素 循环 each 遍历 Backbone View 使用      更新时间:2023-09-26

>我正在使用 Backbone 和 JQuery,并希望创建一个 Backbone View 来创建等高列,如此链接的方法 2 中所述。HTML 如下所示:

<div class="container">
 <div  id="leftcolumn" class="set_equal_height"> … Lots Of Content … </div>
 <div id="middlecolumn" class="set_equal_height"> … Lots Of Content … </div>
 <div  id="rightcolumn" class="set_equal_height"> … Lots Of Content … </div>
</div>

我整理了以下 Backbone View,但它不起作用,大概是因为使用 .each 的循环不起作用(页面加载没有错误,但列的高度不会被 javascript 修改):

define([
  'jquery',
  'underscore',
  'backbone',
], function($, _, Backbone) {
  var SetEqualHeight = Backbone.View.extend({
    initialize: function() {
      var tallestcolumn = 0;
      console.log(this.$el.height());
      console.log(this.$el.attr("id"));
      this.$el.each(function() {
        currentHeight = $(this).height();
        console.log(currentHeight);
        if(currentHeight > tallestcolumn) {
            tallestcolumn  = currentHeight;
        }
      });
    this.$el.height(tallestcolumn);
    },
  });
  return SetEqualHeight;
});

我在单独的 Wire 规范中定义"el"参数如下:{ el: 'div.set_equal_height' },并且由于上面代码中的"console.log(this.$el.height())"和console.log(this.$el.attr("id"))正确打印出来,它正在正确传递。但是.log".each"语句内的控制台没有打印出来,表明".each"有问题。我看了这个问题并尝试了下划线"_.each"方法,但无法弄清楚如何使用给定类(即div.set_equal_height)而不是给定数组遍历元素。谁能启发我如何在上面的骨干视图中制作每个作品?请!!!

仅供参考,以下函数本身工作(我希望将其合并为主干视图或视图助手):

function setEqualHeight(columns) {
 var tallestcolumn = 0;
 columns.each(function() {
  currentHeight = $(this).height();
  if(currentHeight > tallestcolumn) {
   tallestcolumn  = currentHeight;
  }
 });
 columns.height(tallestcolumn);
}
$(document).ready(function() {
 setEqualHeight($("div.set_equal_height"));
});

我假设你正在用这样的东西实例化你的视图?

new SetEqualHeight({el: '.container')

如果是这样,这意味着$el将设置为视图中的容器div。 $(anything).each将遍历"anything"的所有成员...但在您的情况下,只有一个成员('.container')。

解决方案是更改此行:

this.$el.each(function() {

自:

this.$el.find('.set_equal_height').each(function() {

或者更好(更多骨干网):

this.$('.set_equal_height').each(function() {

希望有帮助。