Блог

Главная - Вопросы по программированию - Отфильтровывать классы элемента в jQuery?

Отфильтровывать классы элемента в jQuery?

#javascript #jquery

#javascript #jquery

Вопрос:

Какой наиболее эффективный способ отфильтровать список классов для данного элемента?

 <div class="foo bar"></div>
<div class="bim bar"></div>

$("div.bar").click(function(ev) {
  alert("The non-bar class was:"   ???);
});

Я знаю, что мог бы написать цикл for для просмотра ev.currentTarget.classList, но я хочу знать, есть ли способ получше.

РЕДАКТИРОВАТЬ: я хотел бы уточнить, что я хочу, чтобы предупреждение сообщало мне «foo» и «bim». Я не хочу заменять «bar», я просто хочу иметь возможность доступа к классам, которые НЕ являются bar. Спасибо.

Ответ №1:

Способа получить это с помощью jQuery нет, но я бы сделал:

 $("div.bar").click(function(ev) {
    var nonBarClasses = (' '   this.className   ' ').replace(' bar ', ' ').split(/  /);

    nonBarClasses.shift();
    nonBarClasses.pop();

    // nonBarClasses is now an array, with each element a class that isn't `bar`

    alert("The non-bar class was: "   nonBarClasses.join(" ")); 
});

Смотрите это в действии здесь: http://jsfiddle.net/PpUeX/2

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

1. Я думаю, вы делаете это слишком сложным. Как насчет jsfiddle.net/ZkucZ/1 ?

2. @pimvdb: Я бы не сказал, что использовать filter функцию поверх String.replace проще; особенно когда вопрос касается эффективности. Plus Array.filter не поддерживается в IE < 8.

3. Туше, я упустил эффективность. Тем не менее, ваш в настоящее время включает посторонний элемент. jsfiddle.net/PpUeX/1

Ответ №2:

Вы можете получить всю строку класса из элемента с помощью jQuery.fn.attr() , а затем split() преобразовать ее в массив, с которым вы можете делать все, что захотите.

 $("div.bar").click(function(ev) {
  var classes = $(this).attr('class').split(' '); // [0:'foo', 1:'bar']
});

РЕДАКТИРОВАТЬ: Что касается предоставления «jQuery»-способа получения всех классов, отличных от «bar», вы могли бы создать временный clone() из выбранного элемента и removeClass() класса bar, прежде чем что-либо с ним делать:

 $("div.bar").click(function(ev) {
  var noBarClasses = $(this)
    .clone().removeClass('bar') // <-- no more "bar"
    .attr('class').split(' '); // [0:'foo']
});