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

Question

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

<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-', а скорее с '' - 1010 *

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

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

Проблема в том, что он также выберет 3-й DIV в моем примере.

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

Answer 1

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

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

Answer 2

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

Answer 3

Хотя верхний ответ здесь - это обходной путь для конкретного случая спрашивающего, если вы ищете решение для фактического использования «начинается с» в именах отдельных классов:

Вы можете использовать этот пользовательский селектор jQuery, который я называю :acp() для «Префикса класса». Код внизу этого поста.

var test = $('div:acp("starting_text")');

Это выберет все без исключения элементы <div>, которые имеют по крайней мере одно имя класса, начинающееся с данной строки (в этом примере - стартовый_текст), независимо от того, находится ли этот класс в начале или где-либо еще в строках атрибута класса. .

<div id="1" class="apple orange lemon" />
<div id="2" class="orange applelemon banana" />
<div id="3" class="orange lemon apple" />
<div id="4" class="lemon orangeapple" />
<div id="5" class="lemon orange" />

var startsWithapp = $('div:acp("app")');

Это вернет элементы 1, 2 и 3, но не 4 или 5.

Вот объявление для пользовательского селектора :acp, которое вы можете поместить в любом месте:

$(function(){
    $.expr[":"].acp = function(elem, index, m){
          var regString = '\\b' + m[3];
          var reg = new RegExp(regString, "g");
          return elem.className.match(reg);
    }
});

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

Answer 4

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

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

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

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

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

Answer 5

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

в этом случае на вопрос Джоша Стодола ответ правильный Классы, которые начинаются с «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");

может быть, это поможет кому-то еще, спасибо

Answer 6

Попробуйте это:

$("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;
})