Sử dụng bộ chọn 'bắt đầu với' trên các tên lớp riêng lẻ

Nếu tôi có những điều sau đây:

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

Tôi có thể sử dụng bộ chọn sau để tìm hai DIV đầu tiên:

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

Tuy nhiên, nếu tôi có điều này:

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

Nó sẽ chỉ tìm thấy DIV thứ hai, vì lớp div đầu tiên được trả về dưới dạng một chuỗi (tôi nghĩ) và không thực sự bắt đầu bằng 'apple-' mà là 'some-'

Một cách khác là không sử dụng bắt đầu bằng, mà thay vào đó chứa:

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

Vấn đề với nó là nó cũng sẽ chọn DIV thứ 3 trong ví dụ của tôi.

Câu hỏi: Thông qua jQuery, cách thích hợp để sử dụng các bộ chọn vị ngữ trên các tên lớp riêng lẻ, thay vì toàn bộ thuộc tính lớp dưới dạng một chuỗi là gì? Có phải chỉ là vấn đề lấy LỚP, sau đó chia nó thành một mảng và sau đó lặp qua từng cá nhân với regex? Hoặc có một giải pháp thanh lịch / ít dài dòng hơn?

Các lớp bắt đầu bằng "apple-" cộng với các lớp có chứa "apple-"

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

Tôi khuyên bạn nên làm "táo" lớp riêng của mình. Bạn nên tránh bắt đầu với / kết thúc nếu có thể bởi vì có thể chọn sử dụng div.applesẽ nhanh hơn rất nhiều. Đó là giải pháp thanh lịch hơn. Đừng ngại chia mọi thứ thành các lớp riêng biệt nếu việc này làm cho nhiệm vụ đơn giản / nhanh hơn.

đây là tiền tố với

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

cái này là để bắt đầu, vì vậy bạn không cần phải có char '-' trong đó

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

bạn có thể tìm thấy một loạt các biến thể thú vị khác của bộ chọn jQuery tại đây https://api.jquery.com/carget/selector/

Mặc dù câu trả lời hàng đầu ở đây là một cách giải quyết cho trường hợp cụ thể của người hỏi, nếu bạn đang tìm kiếm một giải pháp để thực sự sử dụng 'bắt đầu bằng' trên các tên lớp riêng lẻ:

Bạn có thể sử dụng bộ chọn jQuery tùy chỉnh này mà tôi gọi là :acp()"Tiền tố lớp." Mã ở dưới cùng của bài này.

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

Điều này sẽ chọn bất kỳ và tất cả các <div>phần tử có ít nhất một tên lớp bắt đầu bằng chuỗi đã cho ("start lòng" trong ví dụ này), bất kể lớp đó ở đầu hay ở nơi nào khác trong chuỗi thuộc tính lớp.

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

Điều này sẽ trả về các phần tử 1, 2 và 3, nhưng không phải 4 hoặc 5.

Đây là tuyên bố cho :acpbộ chọn tùy chỉnh, bạn có thể đặt bất cứ nơi nào:

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

Tôi đã thực hiện điều này bởi vì tôi thực hiện rất nhiều vụ hack trang web GreasMonkey mà tôi không có quyền kiểm soát phụ trợ, vì vậy tôi thường cần tìm các phần tử có tên lớp có hậu tố động. Nó rất hữu ích.

Thử cái này:

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

trong trường hợp này như câu hỏi Josh Stodola trả lời đúng Các lớp bắt đầu bằng "apple-" cộng với các lớp có chứa "apple-"

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

nhưng nếu phần tử có nhiều lớp như thế này

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

sau đó giải pháp của Josh Stodola sẽ không hiệu quả
vì phải làm một số việc như thế này

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

có thể nó giúp một số người khác cảm ơn

Nếu một phần tử có nhiều lớp "[class ^ = 'apple-']" thì không hoạt động, vd

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