Блог

Главная - Вопросы по программированию - Как сконденсировать этот jquery, чтобы разрешить неограниченное количество опций

Как сконденсировать этот jquery, чтобы разрешить неограниченное количество опций

#jquery

#jquery

Вопрос:

У меня есть следующий jquery, который установит все элементы с классом (например, equal1), чтобы они соответствовали высоте самого высокого элемента с этим классом.

Этот код позволяет устанавливать только 11 разных высот. Есть ли способ написать этот код так, чтобы классом могло быть что угодно, начинающееся с equal-[суффикс], например, equal-blurbs.

Таким образом, может быть неограниченное количество различных групп элементов одинаковой высоты с такими классами, как equal-blurbs, equal-price, equal-boxes и т.д.

 (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>

Комментарии:

1. Почему вы используете, class как если бы они были ID ? У вас мог бы быть класс, equal чтобы установить стили, которые все они разделяют, и добавить другой ID or Class , чтобы разделить поведение, которое вы хотите реализовать «индивидуально»

2. потому что идентификаторы должны быть уникальными. если у меня есть несколько элементов, которые я хочу иметь одинаковой высоты, независимо от того, сколько у них содержимого, мне нужно будет установить класс. верно?

Ответ №1:

Вы можете использовать атрибут, начинающийся с селектора, или, если для элемента существует несколько классов, тогда он не будет работать так, как вы ожидали в этом случае, используйте атрибут contains с селектором.

Теперь для группировки на основе класса вам нужно выполнить итерацию по коллекции и вызвать функцию только для уникальных классов, чтобы избежать повторения, используйте дополнительный объект.

Например, вы можете сделать что-то вроде этого (при условии, что существует только один класс для элементов)

 (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* ), вы можете сделать что-то подобное с помощью атрибута contains с помощью селектора.

 (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. спасибо, но это не позволило бы использовать несколько разных высот на одной странице. Например, если бы у меня были одинаковые поля и одинаковые рекламные объявления, разве все они не были бы уравнены вместе?

2. спасибо @pranav-c-balan Я думаю, что это ближе к тому, что я ищу. Но у меня это не работает. Пользователь будет выбирать суффикс в классе. Я использую этот метод суффикса в другом фрагменте, и я чувствую, что его можно было бы использовать аналогичным образом, но это определенно не работает… $[class*="equal-"]').each(function(){ var equalClass = Array.prototype.find.call(this.classList, function(clazz){ return clazz.indexOf('equal-') > -1; }); var suffix = equalClass.split('equal-')[1]; var content = '.equal-' suffix; $(content).attr('style', ''); });

Ответ №2:

просто сделайте:

 (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 вы могли бы содержать их в другом элементе и таким образом указывать на них…

Комментарии:

1. мой вопрос, должно быть, недостаточно ясен. Я не пытаюсь сделать только один класс одинаковой высоты. Я хочу, чтобы этот код jquery работал для любого класса, который пользователь решит, что он хочет, чтобы определенное количество элементов было одинаковой высоты, но также позволял другому набору элементов иметь другую высоту. Это было причиной классов equal1, equal2, equal3. Но это ограничит пользователя только 11 различными высотами. Я бы хотел, чтобы использовалось неограниченное количество классов equalX.