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

Якщо у мене є таке:

<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, оскільки клас першого діва повертається як рядок (я думаю) і насправді не починається з 'apple-', а швидше 'some-'

Один із способів цього не використовувати, починається з, а натомість містить:

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

Проблема в тому, що він також вибере третій DIV на моєму прикладі.

Запитання: Через jQuery, що є правильним способом використання селекторів предикатів для назв окремих класів, а не атрибутів всього класу як рядка? Це лише питання захоплення КЛАСУ, а потім розділення його на масив, а потім циклічного перегляду кожного окремого з допомогою регулярного вираження? Або є більш елегантне / менш багатослівне рішення?

Класи, які починаються з "яблуко" плюс класи, які містять "яблуко"

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

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

це для префікса с

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

це для початку, тому вам не потрібно мати позначку '-'

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

ви можете знайти купу інших цікавих варіантів селектора jQuery тут https://api.jquery.com/category/selectors/

Хоча головна відповідь тут є вирішенням конкретного випадку запитувача, якщо ви шукаєте рішення, як насправді використовувати "починається з" у назвах окремих класів:

Ви можете використовувати цей спеціальний селектор jQuery, який я називаю :acp()"Префікс класу". Код знаходиться внизу цієї публікації.

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

Тут будуть обрані будь-які <div>елементи, які мають принаймні одне ім’я класу, що починається із заданого рядка ("start_text" у цьому прикладі), незалежно від того, чи є цей клас на початку чи деінде у рядках атрибутів класу.

<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 веб-сайтів, на яких у мене немає керованого контролю, тому мені часто потрібно знаходити елементи з іменами класів, які мають динамічні суфікси. Це було дуже корисно.

Спробуйте це:

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

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

у цьому випадку як питання Джоша Стодола відповідь правильна. Класи, які починаються з "яблуко" плюс класи, які містять "яблуко"

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

може бути, це допомагає ще одному спасибі

Якщо в елементі є декілька класів, "[class ^ = 'apple-']" не працює, наприклад

<div class="fruits apple-monkey"></div>