Bireysel sınıf adlarında 'şununla başlar' seçicisini kullanma

Eğer aşağıdakilere sahipsem:

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

İlk iki DIV'yi bulmak için aşağıdaki seçiciyi kullanabilirim:

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

Ancak, ben varsa:

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

İlk div'in sınıfı bir dize olarak döndürüldüğünden ve aslında 'apple-' ile değil, '' some-

Bunun bir yolu kullanmamaktır, bunun yerine şunları içerir:

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

Buradaki sorun, örneğimde 3. DIV'yi de seçecek olması.

Soru: jQuery aracılığıyla, tüm sınıf özniteliğini dize olarak değil, tek tek sınıf adlarında yüklem seçicileri kullanmanın doğru yolu nedir? Sadece SINIF kapmak, sonra bir diziye bölmek ve daha sonra her bir regex ile döngü meselesi midir? Yoksa daha zarif / daha az ayrıntılı bir çözüm var mı?

"Apple-" ile başlayan sınıflar ve "apple-" içeren sınıflar

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

Kendi sınıfında "elma" yapmayı öneriyorum. Kullanmayı seçebilmeniz div.appleçok daha hızlı olacağından , eğer / ile-ile başlangıçtan kaçınmalısınız . Bu daha zarif bir çözüm. Görevi daha basit / daha hızlı yaparsa, işleri ayrı sınıflara bölmekten korkmayın.

bu ile önek içindir

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

Bu başlangıç ​​için yani orada '-' char olması gerekmez

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

jQuery seçicinin diğer harika varyasyonlarını burada bulabilirsiniz https://api.jquery.com/category/selectors/

Buradaki en iyi yanıt, sorucunun özel durumu için bir çözüm olsa da, tek tek sınıf adlarında 'şununla başlar' seçeneğini kullanmak için bir çözüm arıyorsanız:

:acp()"A Class Prefix" için çağırdığım bu özel jQuery seçiciyi kullanabilirsiniz . Kod bu yazının altında.

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

Bu <div>, söz konusu sınıfın sınıf özniteliği dizelerinde başında mı yoksa başka bir yerde mi olduğuna bakılmaksızın, belirtilen dize ile başlayan en az bir sınıf adına (bu örnekte "başlangıç_metni") sahip tüm öğeleri seçer .

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

Bu elemanlar, 1, 2, ve 3'ün yöntemleri kullanılarak fakat döner olmayan 4 ya da 5.

İşte :acpherhangi bir yere koyabileceğiniz özel seçicinin bildirimi :

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

Bunu yaptığım çünkü arka uç kontrolü olmayan web sitelerinin çok fazla GreaseMonkey hacklemesini yapıyorum, bu yüzden genellikle dinamik soneklere sahip sınıf adlarına sahip öğeler bulmam gerekiyor. Çok faydalı oldu.

Bunu dene:

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

bu durumda soru olarak Josh Stodola yanıtı doğru "apple-" ile başlayan sınıflar artı "apple-" içeren sınıflar

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

ancak öğenin böyle birden fazla sınıfı varsa

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

Josh Stodola'nın çözümü bunun
için işe yaramayacak , böyle bir şey yapmak zorunda

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

belki başka birine yardımcı olabilir teşekkürler

Bir öğede birden fazla sınıf varsa "[class ^ = 'apple-']" çalışmaz, ör.

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