如何压缩此jquery以允许无限数量的选项

时间：2019-04-04 19:15:59

标签： jquery

下面是我的jquery，它将为所有元素设置一个类（例如equal1）以匹配该类的最高元素的高度。

此代码仅允许设置11种不同的高度。有没有一种方法可以编写此代码，以使该类可以是任何以equal- [后缀]开头的东西，例如equal-blurbs。

这样，可以无限多个不同组的等高元素，这些类具有等模糊，等价，等框等。

(function($) {

  // Window Load
  $(window).load(function() {
    var viewport = $(window).innerWidth();

    if (viewport >= 960) {
      equal_height($('.equal1'));
      equal_height($('.equal2'));
      equal_height($('.equal3'));
      equal_height($('.equal4'));
      equal_height($('.equal5'));
      equal_height($('.equal6'));
      equal_height($('.equal7'));
      equal_height($('.equal8'));
      equal_height($('.equal9'));
      equal_height($('.equal10'));
      equal_height($('.equal11'));
    }
  });

  // Window Resize
  $(window).resize(function() {
    var viewport = $(window).innerWidth();

    if (viewport >= 960) {
      equal_height($('.equal1'));
      equal_height($('.equal2'));
      equal_height($('.equal3'));
      equal_height($('.equal4'));
      equal_height($('.equal5'));
      equal_height($('.equal6'));
      equal_height($('.equal7'));
      equal_height($('.equal8'));
      equal_height($('.equal9'));
      equal_height($('.equal10'));
      equal_height($('.equal11'));

    } else {
      $('.equal1').attr('style', '');
      $('.equal2').attr('style', '');
      $('.equal3').attr('style', '');
      $('.equal4').attr('style', '');
      $('.equal5').attr('style', '');
      $('.equal6').attr('style', '');
      $('.equal7').attr('style', '');
      $('.equal8').attr('style', '');
      $('.equal9').attr('style', '');
      $('.equal10').attr('style', '');
      $('.equal11').attr('style', '');
    }
  });

  function equal_height(group) {
    var tallest = 0;

    $(group).attr('style', '');

    group.each(function() {
      var this_height = $(this).height();

      if (this_height > tallest) {
        tallest = this_height;
      }
    });

    group.height(tallest);
  }

})(jQuery);
div.equal1 {
  border: 1px solid black;
  padding: 5px;
  vertical-align: top;
}

column {
  width: 24%;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </column>
</body>

2 个答案:

答案 0 :(得分：1)

您可以使用attribute starts with selector，或者如果该元素有多个类，那么在这种情况下它将无法按预期工作，请使用attribute contains with selector。

现在要基于类进行分组，您需要遍历集合，并且仅需要为唯一的类调用函数，以避免重复使用其他对象。

例如，您可以执行类似的操作（假设元素只有一个类）

(function($) {

  // Window Load
  $(window).load(function() {
    var viewport = $(window).innerWidth();

    if (viewport >= 960) {
      get_unique_and_call_equal();
    }
  });

  // Window Resize
  $(window).resize(function() {
    var viewport = $(window).innerWidth();
    if (viewport >= 960) {
      get_unique_and_call_equal();
    } else {
      $('[class^="equal"]').attr('style', '');
    }
  });

  function equal_height(group) {
    var tallest = 0;

    $(group).attr('style', '');

    group.each(function() {
      var this_height = $(this).height();

      if (this_height > tallest) {
        tallest = this_height;
      }
    });

    group.height(tallest);
  }

  function get_unique_and_call_equal() {
    var ref = {};
    $('[class^="equal"]').each(function() {
      if (!(this.className in ref)) {
      // if there is chance for multiple class for elements
      // then you have to extract the class name using regex
      //or some other way
      // for eg: this.className.match(/\bequal[^ ]*/)[0]
        var className = this.className;
        equal_height($('.' +className ));
        ref[className] = true;
      }
    });
  }

})(jQuery);
div.equal1 {
  border: 1px solid black;
  padding: 5px;
  vertical-align: top;
}

column {
  width: 24%;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<body>
  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </column>
</body>

更新：要使用具有多个类（包括equal*）的元素，可以使用attribute contains with selector做类似的事情。

(function($) {

  // Window Load
  $(window).load(function() {
    var viewport = $(window).innerWidth();

    if (viewport >= 960) {
      get_unique_and_call_equal();
    }
  });

  // Window Resize
  $(window).resize(function() {
    var viewport = $(window).innerWidth();
    if (viewport >= 960) {
      get_unique_and_call_equal();
    } else {
    // I'd added space since multiple classes are seperated by space
      $('[class^="equal"],[class*=" equal"]').attr('style', '');
    }
  });

  function equal_height(group) {
    var tallest = 0;

    $(group).attr('style', '');

    group.each(function() {
      var this_height = $(this).height();

      if (this_height > tallest) {
        tallest = this_height;
      }
    });

    group.height(tallest);
  }

  function get_unique_and_call_equal() {
    var ref = {};
    $('[class^="equal"],[class*=" equal"]').each(function() {
      if (!(this.className in ref)) {
        // extract equal prefixed class from class list
        var className = this.className.match(/\bequal[^ ]*/)[0];
        equal_height($('.' + className));
        ref[className] = true;
      }
    });
  }

})(jQuery);
div.equal1 {
  border: 1px solid black;
  padding: 5px;
  vertical-align: top;
}

column {
  width: 24%;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<body>
  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </column>
</body>

答案 1 :(得分：0)

只需：

(function($) {

// Window Load
$(window).load(function() {
 var viewport = $(window).innerWidth();

 if (viewport >= 960) {
  equal_height($('.equal'));
 }
});

 // Window Resize
 $(window).resize(function() {
 var viewport = $(window).innerWidth();

 if (viewport >= 960) {
  equal_height($('.equal'));
 } else {
  $('.equal').attr('style', '');
 }
});

function equal_height(group) {
 var tallest = 0;

 $(group).attr('style', '');

 group.each(function() {
  var this_height = $(this).height();

  if (this_height > tallest) {
    tallest = this_height;
  }
});

 group.height(tallest);
}

})(jQuery);

我相信可以进一步优化此代码，但是我不确定group变量包含什么，也不清楚为什么需要不同的类以相同的方式进行样式设置，具体取决于您的DOM结构它们包含在另一个元素中，这样您就可以指向它们...

相关问题
最新问题