Menggunakan pemilih 'dimulai dengan' pada nama kelas individual

Jika saya memiliki yang berikut ini:

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

Saya dapat menggunakan pemilih berikut untuk menemukan dua DIV pertama:

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

Namun, jika saya memiliki ini:

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

Ini hanya akan menemukan DIV kedua, karena kelas div pertama dikembalikan sebagai string (saya pikir) dan tidak benar-benar dimulai dengan 'apple-' melainkan 'some-'

Salah satu cara untuk tidak menggunakan dimulai dengan, tetapi berisi:

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

Masalahnya adalah itu juga akan memilih DIV ke-3 dalam contoh saya.

Pertanyaan: Melalui jQuery, apa cara yang tepat untuk menggunakan pemilih predikat pada nama kelas individu, dan bukan seluruh atribut kelas sebagai string? Apakah ini hanya masalah meraih CLASS, kemudian membaginya menjadi sebuah array dan kemudian mengulang setiap individu dengan regex? Atau apakah ada solusi yang lebih elegan / kurang bertele-tele?

Kelas yang dimulai dengan "apple-" plus kelas yang berisi "apple-"

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

Saya akan merekomendasikan membuat "apel" kelasnya sendiri. Anda harus menghindari permulaan-dengan / akhir-dengan jika Anda bisa karena bisa memilih menggunakan div.appleakan jauh lebih cepat. Itu solusi yang lebih elegan. Jangan takut untuk membagi hal-hal menjadi kelas yang terpisah jika itu membuat tugas lebih mudah / lebih cepat.

ini untuk awalan dengan

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

ini untuk permulaan sehingga Anda tidak perlu memiliki '-' char di sana

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

Anda dapat menemukan banyak variasi keren lainnya dari pemilih jQuery di sini https://api.jquery.com/category/selectors/

Sementara jawaban teratas di sini adalah solusi untuk kasus khusus si penanya, jika Anda mencari solusi untuk benar-benar menggunakan 'dimulai dengan' pada nama kelas individual:

Anda dapat menggunakan pemilih jQuery khusus ini, yang saya sebut :acp()"Awalan Kelas." Kode ada di bagian bawah posting ini.

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

Ini akan memilih setiap dan semua <div>elemen yang memiliki setidaknya satu nama kelas yang diawali dengan string yang diberikan ("starting_text" dalam contoh ini), terlepas dari apakah kelas itu di awal atau di tempat lain di string atribut kelas.

<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")');

Ini akan mengembalikan elemen 1, 2, dan 3, tetapi tidak 4 atau 5.

Berikut deklarasi untuk :acppemilih khusus, yang dapat Anda tempatkan di mana saja:

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

Saya membuat ini karena saya melakukan banyak peretasan situs GreaseMonkey di mana saya tidak memiliki kontrol backend, jadi saya sering perlu menemukan elemen dengan nama kelas yang memiliki sufiks dinamis. Sudah sangat berguna.

Coba ini:

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

dalam hal ini sebagai pertanyaan, Josh Stodola menjawab dengan benar Kelas yang dimulai dengan "apple-" plus kelas yang berisi "apple-"

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

tetapi jika elemen memiliki beberapa kelas seperti ini

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

maka solusi Josh Stodola tidak akan berhasil
karena ini harus melakukan hal seperti ini

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

mungkin itu membantu orang lain, terima kasih

Jika suatu elemen memiliki kelas kelipatan "[class ^ = 'apple-']" tidak bisa berfungsi, misalnya

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