Sử dụng 'bắt đầu với' selector trên tên lớp cá nhân

Question

Nếu tôi đã đ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 đây để 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 DIV thứ hai, vì lớp div đầu tiên được trả về dưới dạng chuỗi (tôi nghĩ) và không thực sự bắt đầu với 'apple-' mà là 'some-'

Một con đường xung quanh đó là không sử dụng bắt đầu với, nhưng thay vì chứa:

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

Hãy thử điều 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; 
}) 

Answer 4

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

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

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

nhưng nếu nguyên tố có nhiều lớp học 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 Josh Stodola sẽ không làm việc
cho việc này phải làm một số điều 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ó sẽ giúp một số một else thanks

Answer 5

đây là tiền tố có

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

này là dành cho bắt đầu với, do đó 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ể mát mẻ khác của jQuery selector đây https://api.jquery.com/category/selectors/

Answer 6

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

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

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

này sẽ chọn bất kỳ và tất cả <div> yếu tố đó có ít nhất một tên lớp bắt đầu với chuỗi nhất định ("starting_text" trong ví dụ này), cho dù lớp đó là ở đầu hoặc ở nơi khác trong lớp chuỗi thuộc tính.

<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 containsapp = $('div:acp("app")'); 

này sẽ trở lại các yếu tố 1, 2, và 3, nhưng không 4 hoặc 5.

Đây là tuyên bố cho selector :acp tùy chỉnh, mà bạn có thể đặt ở bất cứ đâu:

$(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 vì tôi thực hiện rất nhiều trang web GreaseMonkey 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.