使用JQuery

Question

当我想在同一高度的JQuery脚本中包含多个类时，我可以采取什么方法？

我目前有四个不同的div，它们被分类为“ .row-16”，并且效果很好，但是如何在此特定脚本中添加更多组？

我想包含.row-1 .row-2等。

很抱歉造成混乱，但这最终是我要实现的目标。
.row-1有四列，它们的高度大小相同，取决​​于最高值。
.row-2将与第1行分开，并具有自己的等高列。

更新的JSFiddle：http://jsfiddle.net/fLr9th4y/3/-第11行的工作示例

代码如下：

$(document).ready(function(){

$('.container').each(function(){  
    var highestBox = 0;

    $(this).find('.row-16').each(function(){
        if($(this).height() > highestBox){  
            highestBox = $(this).height();  
        }
    })

    $(this).find('.row-16').height(highestBox);
    });    
});

上面的脚本当前将我的所有四列均以正确的高度对齐，我只想添加更多的类组。

Answer 1

简单：

    $(document).ready(function() {
    $('.container').each(function() {
        var highestBox16 = 0;
        var highestBox1 = 0;
        var highestBox2 = 0;
        var highestBox3 = 0;
        //var highestBox..

        $(this).find('.row-16,.row-1,.row-2,.row-3').each(function() {
            if($(this).hasClass('row-16')){
                if ($(this).height() > highestBox16) {
                    highestBox16 = $(this).height();
                }
            }
            if($(this).hasClass('row-1')){
                if ($(this).height() > highestBox1) {
                    highestBox1 = $(this).height();
                }
            }
            if($(this).hasClass('row-2')){
                if ($(this).height() > highestBox2) {
                    highestBox2 = $(this).height();
                }
            }
            if($(this).hasClass('row-3')){
                if ($(this).height() > highestBox3) {
                    highestBox3 = $(this).height();
                }
            }
        })
        $('.row-16,.row-1,.row-2,.row-3').height(highestBox);
    });
});

Answer 2

为什么不添加一个新类，特别是对于那些应该改变其高度并以此为目标的元素呢？顺便说一句，这是我几年前在此类场合使用的类似脚本。

(function ($, window, document, undefined) {
/**
 * Equalize the height of the given items.
 * @type {*|jQuery}
 * @return mixed
 * @param options
 * Example: $('.item1, .item2').equalHeight({ container: '.container' });
 */
$.fn.equalHeight = function (options) {
    var items, settings;
    items = this;
    settings = $.extend({
        container: ''
    }, options);
    if (settings.container) {
        // If a container is set, apply setHeight() for all containers.
        $(settings.container).each(function () {
            var thisC = $(this),
                getItems = [];
            $.each(items, function (index, value) {
                getItems.push(thisC.find(value));
            });
            return setHeight(getItems);
        });
    } else {
        // Otherwise we assume that the items exist only once in a page
        // and we apply setHeight() to their first (and unique) instance.
        return setHeight(this);
    }
    // Set the height of all items equal to the highest item.
    function setHeight(getItems) {
        var itemsH = [];
        $(getItems).each(function () {
            itemsH.push($(this).outerHeight());
        });
        var maxH = Math.max.apply(Math, itemsH);
        $(getItems).each(function () {
            return $(this).css('height', maxH);
        });
    }
}
})(jQuery, window, document);

（Demo）

当然，由于flexbox，我不再需要它。

Answer 3

这应该选择以“行”开头的每个类别，然后获取每个唯一的类别，然后获取每个类别的最大高度，并将所有高度设置为最大类别的最大值。

每次问题更新时，首先使用问题和小提琴使用给定的“ row-”获得可能的答案，这似乎不在小提琴中，而在问题中。

var myselector = 'row-';

function getRowMax(row) {
  var heights = $(row).map(function() {
    return $(this).height();
  }).get();

  var maxHeight = Math.max.apply(null, heights);
  return maxHeight;
}

function onlyUnique(value, index, self) {
  return self.indexOf(value) === index;
}

function getrow(value, index, self) {
  return value.startsWith(myselector);
}

$(function() {
  var rows = $('.container').find("[class^='" + myselector + "']");
  var classListAll = [];
  rows.each(function(item) {
    var classes = item.attr('class').split(/\s+/);
    classListAll.concat(classes);
  });
 // var classListAll = rows.attr('class').split(/\s+/);
  var classList = classListAll.filter(onlyUnique).filter(getrow);
  $.each(classList, function(index, item) {
    var sel = '.' + item;
    var m = getRowMax(sel);
    $(sel).height(m);
  });
});

.heading {
  background-color: #00C6D7;
}

.sub-heading {
  background-color: white;
  border-bottom: 1px solid lightgray;
}

h4,
h6 {
  margin-bottom: 0px;
}

.container {
  box-shadow: 0 1px 3px rgba(77, 72, 69, 0.2), 0 6px 10px rgba(77, 72, 69, 0.15);
}

.row>.col-md-12>span {
  font-size: smaller;
}

.col-md-4>.row {
  padding-top: .6rem!important;
  padding-bottom: .6rem!important;
}

.col-md-3>.row {
  padding-top: .6rem!important;
  padding-bottom: .6rem!important;
}

.col-md-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.col-md-9 {
  padding: 0px!important;
}

.bl {
  border-left: 1px solid lightgray;
}

.bb {
  border-bottom: 1px solid #00C6D7;
}

.bg-white {
  background-color: white;
}

.mainText {
  font-style: italic;
  color: #00C6D7;
}

.bg-fhdark {
  background-color: #5E6A71;
}

.title {
  color: #A2AD00;
}

.blank {
  background: transparent!important;
}

.slick-prev,
.slick-next {
  background: black!important;
}

.r1 {
  color: black;
}


/* BootStrap 4 Classes */

.py-5 {
  padding-bottom: 3rem!important;
  padding-top: 3rem!important;
}

.py-2 {
  padding-bottom: .5rem!important;
  padding-top: .5rem!important;
}

.text-white {
  color: #fff!important;
}

.text-left {
  text-align: left!important;
}

.text-uppercase {
  text-transform: uppercase!important;
}

.font-weight-bold {
  font-weight: 700!important;
}

.small {
  font-size: 80%;
  font-weight: 400;
}

.row {
  display: flex;
  flex-wrap: wrap;
}


/* ----- */

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

<body>
  <div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-10 text-white text-left py-2 heading">
          <h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
          <span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
                </span>
        </div>
        <div class="col-md-2 col-md-2 text-center py-2 heading">
          <img src="" />
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="row">
            <div class="col-md-3">
              <div class="row r1">
                <div class="col-md-12">
                  <span>Test</span>
                </div>
              </div>
              <div class="row py-1 bg-fhdark">
                <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                  <span>Client</span>
                </div>
              </div>
              <div class="row bb">
                <div class="col-md-12">
                  <span>Client Focus, Strategic Counsel and Consultancy</span>
                </div>
              </div>
              <div class="row bb">
                <div class="col-md-12">
                  <span>Integrated Strategy and Account Management</span>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <span>Creativity and Innovation</span>
                </div>
              </div>
              <div class="row py-1 bg-fhdark">
                <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                  <span>Talent</span>
                </div>
              </div>
              <div class="row bb">
                <div class="col-md-12">
                  <span>Manage Full Talent LifeCycle</span>
                </div>
              </div>
              <div class="row bb">
                <div class="col-md-12">
                  <span>Professional Development/Developing and Empowering</span>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <span>Self-Leadership</span>
                </div>
              </div>
              <div class="row py-1 bg-fhdark">
                <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                  <span>Business Development and Growth</span>
                </div>
              </div>
              <div class="row bb">
                <div class="col-md-12">
                  <span>New Business Strategy</span>
                </div>
              </div>
              <div class="row bb">
                <div class="col-md-12">
                  <span>Prospecting</span>
                </div>
              </div>
              <div class="row bb">
                <div class="col-md-12">
                  <span>New Business Pitch Preparation, Participation and Leadership</span>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <span>Organic Growth</span>
                </div>
              </div>
              <div class="row py-1 bg-fhdark">
                <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                  <span>Finance and Operations</span>
                </div>
              </div>
              <div class="row bb">
                <div class="col-md-12 row-11">
                  <span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <span>Staffing and Resource Planning</span>
                </div>
              </div>
            </div>
            <div class="col-md-9">
              <section class="regular slider">
                <div class="col-md-4 bl">
                  <div class="row r1">
                    <div class="col-md-12">
                      <h6 class="text-uppercase font-weight-bold title">Junior</h6>
                      <span>Valued Colleague and Practitioner</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>1</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>2</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>3</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>4</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>5</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>6</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>7</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>8</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>9</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>10</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12 row-11">
                      <span>11</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>12</span>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 bl">
                  <div class="row r1">
                    <div class="col-md-12">
                      <h6 class="text-uppercase font-weight-bold title">Mid</h6>
                      <span>Trusted Colleague; Proven and Creative Practitioner</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>1</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>2</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>3</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>4</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>5</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>6</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>7</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>8</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>9</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>10</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12 row-11">
                      <span>11</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>12</span>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 bl">
                  <div class="row r1">
                    <div class="col-md-12">
                      <h6 class="text-uppercase font-weight-bold title">Senior</h6>
                      <span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>1</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>2</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>3</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>4</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>5</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>6</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>7</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>8</span>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12">
                      <span>9</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>10</span>
                    </div>
                  </div>
                  <div class="row bg-fhdark">
                    <div class="col-md-12">
                      <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">

                      </div>
                    </div>
                  </div>
                  <div class="row bb">
                    <div class="col-md-12 row-11">
                      <span>11</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <span>12</span>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $(".regular").slick({
        dots: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
      });
    });
  </script>
</body>