Использование селектора "начинается с" для отдельных имен классов

Если у меня есть следующее:

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

Я могу использовать следующий селектор, чтобы найти первые два DIV:

$("div[class^='apple-']")

Однако, если у меня есть это:

<div class="some-other-class apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

Он найдет только второй DIV, так как первый div-класс возвращается как строка (я думаю) и на самом деле не начинается с "apple-", а скорее "some -"

Один из способов избежать использования начинается с, но вместо этого содержит:

$("div[class*='apple-']")

Проблема с этим будет также выбором третьего DIV в моем примере.

Вопрос: Через jQuery, каков правильный способ использования предикатных селекторов для отдельных имен классов, а не весь атрибут класса в виде строки? Это просто вопрос захвата КЛАССА, а затем разбиение его на массив и последующий цикл каждого отдельного с регулярным выражением? Или есть более элегантное/менее подробное решение?

Ответ 1

Классы, начинающиеся с "apple-" плюс классы, содержащие "apple -"

$("div[class^='apple-'],div[class*=' apple-']")

Ответ 2

Я бы рекомендовал сделать "яблоко" собственным классом. Вы должны избегать запуска-с/концами, если можете, потому что возможность выбора с помощью div.apple будет намного быстрее. Это более элегантное решение. Не бойтесь разделить вещи на отдельные классы, если это упрощает/ускоряет задачу.

Ответ 3

Попробуйте следующее:

$("div[class]").filter(function() {
    var classNames = this.className.split(/\s+/);
    for (var i=0; i<classNames.length; ++i) {
        if (classNames[i].substr(0, 6) === "apple-") {
            return true;
        }
    }
    return false;
})

Ответ 4

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

в этом случае, так как вопрос Josh Stodola правильный Классы, начинающиеся с "apple-" плюс классы, содержащие "apple -"

$("div[class^='apple-'],div[class*=' apple-']")

но если элемент имеет несколько классов, подобных этому

<div class="some-class apple-monkey"></div>
<div class="some-class apple-horse"></div>
<div class="some-class cow-apple-brick"></div>

тогда решение Джоша Стодолы не будет работать
для этого нужно сделать что-то вроде этого

$('.some-parent-class div').filter(function () {
  return this.className.match(/\bapple-/);// this is for start with
  //return this.className.match(/apple-/g);// this is for contain selector
}).css("color","red");

может быть, это помогает кому-то еще поблагодарить

Ответ 5

это для префикса с

$("div[class^='apple-']")

это для начала, поэтому вам не нужно иметь '-' char там

$("div[class|='apple']")

вы можете найти кучу других интересных вариаций селектора jQuery здесь https://api.jquery.com/category/selectors/