JQuery.hasClass для нескольких значений в операторе if
у меня есть простое утверждение if как таковое:
if ($('html').hasClass('m320')) {
// do stuff
}
это работает, как ожидалось. Тем не менее, я хочу добавить больше классов в if statement
чтобы проверить, если любой из классов присутствуют в <html>
тег. Мне это нужно, так что это не все из них, а просто наличие хотя бы одного класса, но это может быть больше.
мой вариант использования заключается в том, что у меня занятия (например,m320
,m768
) добавлено для различных Ширин видового экрана, поэтому я хочу выполнить только определенный Jquery, если это определенная ширина (класс.)
вот что я пробовал до сих пор:
1.
if ($('html').hasClass('m320', 'm768')) {
// do stuff
}
2.
if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) {
// do stuff
}
3.
if ($('html').hasClass(['m320', 'm768'])) {
// do stuff
}
ни один из них, кажется, не работает. Не уверен, что я делаю неправильно, но скорее всего мой синтаксис или структуру.
10 ответов:
у вас просто были некоторые испорченные скобки во второй попытке.
var $html = $("html"); if ($html.hasClass('m320') || $html.hasClass('m768')) { // do stuff }
для удовольствия, я написал немного jQuery add-on метод, который будет проверять для любого из нескольких имен классов:
$.fn.hasAnyClass = function() { for (var i = 0; i < arguments.length; i++) { if (this.hasClass(arguments[i])) { return true; } } return false; }
потом, в вашем примере, вы могли бы использовать это:
if ($('html').hasAnyClass('m320', 'm768')) { // do stuff }
вы можете передать столько имен классов, сколько вы хотите.
вот и расширенная версия, которая также позволяет передавать несколько имен классов, разделенных пробелом:
$.fn.hasAnyClass = function() { for (var i = 0; i < arguments.length; i++) { var classes = arguments[i].split(" "); for (var j = 0; j < classes.length; j++) { if (this.hasClass(classes[j])) { return true; } } } return false; } if ($('html').hasAnyClass('m320 m768')) { // do stuff }
рабочая демонстрация:http://jsfiddle.net/jfriend00/uvtSA/
Это может быть и другое решение:
if ($('html').attr('class').match(/m320|m768/)) { // do stuff }
согласно jsperf.com это тоже довольно быстро.
для тех, кто интересуется некоторыми из различных аспектов производительности со всеми этими различными вариантами, я создал случай jsperf здесь:jsperf
короче, используя
element.hasClass('class')
самый быстрый.следующая лучшая ставка-это использование
elem.hasClass('classA') || elem.hasClass('classB')
. Примечание по этому поводу: порядок имеет значение! Если класс 'classA', скорее всего, будет найден, перечислите его первым! Или операторы условия возвращаются, как только один из них выполняется.худшая производительность на сегодняшний день была с помощью
element.is('.class')
.также перечислены в jsperf-это CyberMonk это!--5--> и личное дело.
вот небольшое изменение ответа, предложенного jfriend00:
$.fn.hasAnyClass = function() { var classes = arguments[0].split(" "); for (var i = 0; i < classes.length; i++) { if (this.hasClass(classes[i])) { return true; } } return false; }
позволяет использовать тот же синтаксис, что и .addClass () and .removeClass(). например,
.hasAnyClass('m320 m768')
Нужна пуленепробиваемость, конечно, так как она предполагает хотя бы один аргумент.
var classes = $('html')[0].className; if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) { //do something }
метод hasClass принимает массив имен классов в качестве аргумента, вы можете сделать что-то вроде этого:
$(document).ready(function() { function filterFilesList() { var rows = $('.file-row'); var checked = $("#filterControls :checkbox:checked"); if (checked.length) { var criteriaCollection = []; checked.each(function() { criteriaCollection.push($(this).val()); }); rows.each(function() { var row = $(this); var rowMatch = row.hasClass(criteriaCollection); if (rowMatch) { row.show(); } else { row.hide(200); } }); } else { rows.each(function() { $(this).show(); }); } } $("#filterControls :checkbox").click(filterFilesList); filterFilesList(); });
Я проверил несколько классов в параметре метода hasClass, и он работает так, как ожидалось.
$('el').hasClass('first-class second-class');
это в случае, если вам нужны оба класса присутствуют. Для любого или логики просто используйте|/
$('el').hasClass('first-class') || $('el').hasClass('second-class')
Не стесняйтесь оптимизировать по мере необходимости