Chọn các yếu tố theo thuộc tính


253

Tôi có một bộ sưu tập các hộp kiểm với id được tạo và một số trong số chúng có thuộc tính bổ sung. Có thể sử dụng JQuery để kiểm tra xem một phần tử có thuộc tính cụ thể không? Ví dụ: tôi có thể xác minh xem phần tử sau có thuộc tính "myattr" không? Giá trị của thuộc tính có thể thay đổi.

<input type="checkbox" id="A" myattr="val_attr">A</input>

Ví dụ: làm thế nào tôi có thể nhận được một tập hợp tất cả các hộp kiểm có thuộc tính này mà không cần kiểm tra từng cái một? Điều này có thể không?


2
Bên cạnh đó, <input /> là một thẻ trống không có nghĩa là có nội dung bên trong nó. Có lẽ bạn không quan tâm đến việc xác thực khi bạn có mặt myatttr ...
ScottE


Nếu bạn đã có một bộ sưu tập và bạn chỉ muốn lọc ra các yếu tố có thuộc tính cụ thể - chỉ cần thực hiện -$filtered = $collection.filter('[attribute_name]');
jave.web

Câu trả lời:


190

Bạn có nghĩa là bạn có thể chọn chúng? Nếu vậy, thì có:

$(":checkbox[myattr]")

4
Lưu ý rằng nếu bạn đang kiểm tra sự tồn tại (ví dụ như trong câu lệnh if) thì có lẽ chính xác / đáng tin cậy hơn để làm: if ($ (": hộp kiểm [myattr]"). Length ()> 0) ...
rinogo

14
@rinogo: thực sự tất cả những gì bạn cần là if ($ (": hộp kiểm [myattr]"). length). Không () sau độ dài là không cần thiết,> 0, 0 cũng không được ước tính thành sai trong các phép thử đẳng thức không yêu cầu đẳng thức nghiêm ngặt (cả giá trị và loại).
bmarti44

1
Nó ném lỗi js nếu bạn thử một cái gì đó như: td [myattr]. Vì vậy, tôi nghĩ rằng tính năng này là các hộp kiểm nhắm mục tiêu cụ thể.
đánh lừa

6
Dấu hai chấm chọn các lớp giả, được xác định bởi kiểu attr. Để áp dụng điều tương tự cho td's, chỉ cần bỏ qua dấu hai chấm.
dhochee

Hoặc nếu bạn muốn xem nếu một cái gì đó không có thuộc tính, chẳng hạn như tìm tất cả các liên kết không có hrefthuộc tính. $("#myBox").find('a').filter(':not([href])')
âm sắc

368
if ($('#A').attr('myattr')) {
    // attribute exists
} else {
    // attribute does not exist
}

BIÊN TẬP:

Ở trên sẽ rơi vào else-branch khi myattrtồn tại nhưng là một chuỗi rỗng hoặc "0". Nếu đó là một vấn đề bạn nên kiểm tra rõ ràng về undefined:

if ($('#A').attr('myattr') !== undefined) {
    // attribute exists
} else {
    // attribute does not exist
}

3
Không phải là một câu trả lời tuyệt vời. "không xác định" không phải là một từ khóa trong Javascript. Xem constc.blogspot.com/2008/07/ từ
mhenry1384

16
Bạn đã đúng ... Nhưng xác định lại undefinedđược coi là trường hợp cạnh và so sánh ở trên sẽ hoạt động trong 99% của tất cả các trường hợp.
Stefan Gehrig

6
Không hoạt động nếu thuộc tính có một chuỗi rỗng. Một ví dụ là myattr = ''
huyền thoại lập trình viên

3
@mhenry - sau đó bạn sẽ gặp lỗi :) Nếu bạn đang xây dựng dự án cho tôi hoặc bên cạnh tôi, tôi yêu cầu bạn sửa lỗi của mình. Nếu đó là một gói nguồn mở thì tôi (cùng với nhiều người dùng) sẽ ngừng sử dụng nó dựa trên lý do rằng nó được mã hóa kém. Nếu bạn không thay đổi thì cuối cùng người khác sẽ chọn một phiên bản mà không có lỗi và mọi người sẽ sử dụng thay thế và bạn sẽ mất dự án của riêng mình, như đã xảy ra nhiều lần trước đây khi ai đó tạo ra một gói đó là một ý tưởng hay với thực hiện kém. Dù bằng cách nào nó cũng sẽ dạy cho bạn một bài học về thực hành mã hóa :)
Jimbo Jonny

8
if (typeof $ ('# A'). attr ('myattr')! == 'không xác định')
James Westgate

166

Tôi biết đã lâu rồi kể từ khi câu hỏi được hỏi, nhưng tôi thấy tấm séc rõ ràng hơn như thế này:

if ($("#A").is('[myattr]')) {
    // attribute exists
} else {
    // attribute does not exist
}

(Như được tìm thấy trên trang web này ở đây )

Tài liệu về được có thể được tìm thấy ở đây


Theo W3C, các thuộc tính boolean được xác định bởi sự hiện diện hoặc vắng mặt của thuộc tính. jQuery cung cấp phương thức .attr () để thao tác các giá trị thuộc tính. Nhưng làm thế nào để chúng ta thêm một thuộc tính không có giá trị? Phương thức bạn cung cấp để kiểm tra sự hiện diện của một thuộc tính không được mô tả trong tài liệu jQuery (1.8.2). Bạn có biết cách thêm một thuộc tính với jQuery không?
chmike

@chmike Để thêm một thuộc tính, tôi sẽ thực hiện theo cách này: $ ("# A"). prop ("myNewAttribution", someValue); Bạn có thể cung cấp cho someValue bất kỳ giá trị nào bạn chọn: chuỗi, số, chuỗi rỗng, true / false.
Jonathan Bergeron

Điều này sẽ thêm thuộc tính với một giá trị được gán không giống với thuộc tính không có giá trị.
chmike

5
Tôi đồng ý, đây là câu trả lời tốt nhất (sử dụng jQuery) - rất rõ ràng và súc tích. Tôi đã tự hỏi tại sao jQuery không chỉ có hàm hasAttribution () và câu trả lời là, javascript gốc đã có sẵn. Bất kỳ Phần tử Dom HTML nào cũng có phương thức hasAttribution ('propertyName'). Vì vậy, bạn có thể làm: $ ('# A') [0] .hasAttribution ('myattr') @chmike - Tôi không nghĩ bạn có thể thêm một thuộc tính trống bằng cách sử dụng các hàm jQuery, nhưng bạn có thể làm điều đó với HTML Element Element đối tượng theo cách tương tự như sau: $ ("# A") [0] .setAttributionNode (document.createAttribution ("myNewAttribution"));
Daniel Howard

1
Chỉ là một bình luận mà tôi thích câu trả lời này, nhưng đã nhầm lẫn về các bình luận hỏi làm thế nào để thêm một thuộc tính mà không có giá trị. Những điều này không liên quan đến câu hỏi hoặc câu trả lời.
tạm biệt 17/2/2015

9

Điều này sẽ làm việc:

$('#A')[0].hasAttribute('myattr');


@RetroCoder, quan điểm của bạn về liên kết của bạn là gì? Thử nghiệm này có vẻ khá tốt, đặc biệt là vì bạn thường sử dụng $(this).<something>khi ở đây bạn có thể thực hiện this.hasAttribute('...')trực tiếp (và tất nhiên không quan tâm đến các trình duyệt cũ hơn.)
Alexis Wilke

8

Trong JavaScript, ...

null == undefined

... trả về true*. Đó là sự khác biệt giữa =====. Ngoài ra, tên undefinedcó thể được xác định (nó không phải là một từ khóa như nullvậy) vì vậy tốt hơn hết bạn nên kiểm tra một số cách khác. Cách đáng tin cậy nhất có lẽ là so sánh giá trị trả về của typeoftoán tử.

typeof o == "undefined"

Tuy nhiên, so sánh với null nên hoạt động trong trường hợp này.

* Giả sử undefinedtrong thực tế là không xác định.


Không xác định không phải là một từ khóa dành riêng trong JavaScript. Trong jQuery, có thể trộn chính xác tên của nó bởi vì nó được xây dựng với bộ điều khiển "var" và không có giá trị. Trên đầu mã thư viện ma thuật, còn nguyên vẹn, có một dòng ghi "var không xác định;" và theo cách này, một biến không xác định được xác định với tên đó trong phạm vi jQuery ... Nhưng tất cả có thể được đặt tên giống như "không tên" bằng cách gõ "var unnamed;"
Emanuele Del Grande

1
Điều này không kiểm tra một thuộc tính, kiểm tra này cho một thuộc tính trong một đối tượng javascript tại sao điều này có 6 upvote?
ncubica

5

$("input[attr]").length có thể là một lựa chọn tốt hơn


4

Một vài ý tưởng đã được đưa ra bằng cách sử dụng "typeof", jQuery ".is" và ".filter" vì vậy tôi nghĩ rằng tôi sẽ đăng lên một bản so sánh hoàn hảo nhanh chóng về chúng. Typeof dường như là sự lựa chọn tốt nhất cho việc này. Trong khi những cái khác sẽ hoạt động, dường như có một sự khác biệt hiệu suất rõ ràng khi gọi thư viện jq cho nỗ lực này.


2
if (!$("#element").attr('my_attr')){
  //return false
  //attribute doesn't exists
}

1
điều này có thể không hoạt động, vì bạn có thể thêm một thuộc tính không có giá trị. trong trường hợp như vậy, điều kiện này sẽ vượt qua, mặc dù hành vi mong muốn có thể trả về true, thuộc tính được đặt. tương tự như PHP isset()hoặc ví dụ trong js $("#element").attr('my_attr') === false,
ulkas

2

như trong bài đăng này , bằng cách sử dụng .isvà bộ chọn thuộc tính [], bạn có thể dễ dàng thêm một hàm (hoặc nguyên mẫu):

function hasAttr($sel,attr) {
    return $sel.is('['+attr+']');
}

1
$("input#A").attr("myattr") == null

1
$ (). attr () sẽ không trả về null như được đề xuất bởi ví dụ của chúng tôi, thay vào đó, nó sẽ trả về không xác định.
Stefan Gehrig

Hoạt động với tôi trong con bọ lửa, nhưng đó có thể là một thứ con bọ lửa
Mathias F

Chưa thử, nhưng đó là những gì tài liệu nói: docs.jquery.com/Attribut/attr#name
Stefan Gehrig

1

đơn giản:

$('input[name*="value"]')

Thông tin thêm: tài liệu chính thức


1
Dấu ngoặc kép không thoát trong chuỗi được xác định bằng dấu ngoặc kép, không phải là chuỗi hợp lệ. Thật không may, tôi không thể chỉnh sửa nó cho bạn vì một chỉnh sửa phải thay đổi 6 ký tự trở lên, cần phải thay đổi.
Jimbo Jonny

0

Ngoài việc chọn tất cả các thành phần có thuộc tính $('[someAttribute]')hoặc $('input[someAttribute]')bạn cũng có thể sử dụng hàm để thực hiện kiểm tra boolean trên một đối tượng, chẳng hạn như trong trình xử lý nhấp chuột:

if(! this.hasAttribute('myattr') ) { ...


0

Tôi đã tạo gói npm với hành vi dự định như được mô tả ở trên trong câu hỏi.

Liên kết đến [npm] [github]

Cách sử dụng rất đơn giản. Ví dụ:

<p id="test" class="test">something</p>
$("#test").hasAttr("class")

trả về đúng

Làm việc với lạc đà quá.


0

Để chọn các yếu tố có một thuộc tính nhất định, xem các câu trả lời ở trên.

Để xác định xem một phần tử jQuery đã cho có thuộc tính cụ thể không, tôi đang sử dụng một plugin nhỏ trả về truenếu phần tử đầu tiên trong bộ sưu tập ajQuery có thuộc tính này:

/** hasAttr
 ** helper plugin returning boolean if the first element of the collection has a certain attribute
 **/
$.fn.hasAttr = function(attr) {
   return 0 < this.length
       && 'undefined' !== typeof attr
       && undefined !== attr
       && this[0].hasAttribute(attr)
}

-5

JQuery sẽ trả về thuộc tính dưới dạng chuỗi. Do đó, bạn có thể kiểm tra độ dài của chuỗi đó để xác định xem có được đặt không:

if ($("input#A").attr("myattr").length == 0)
 return null;
else
 return $("input#A").attr("myattr");

Vì vậy, tôi biết nó đã được hơn một năm và tôi nên giải quyết nó từ lâu. Tôi tò mò về phần nào không hoạt động? Nếu tôi biết bạn chỉ đang cố gắng chọn chúng, tôi sẽ không đưa ra đoạn mã trên. Tôi nghĩ rằng bạn muốn kiểm tra chúng cá nhân. JQuery thực tế trả về thuộc tính dưới dạng một chuỗi và bạn có thể kiểm tra độ dài của chuỗi đó giống như bất kỳ chuỗi nào khác. Vì vậy, miễn là bộ chọn và thuộc tính của bạn là chính xác, bạn sẽ có thể kiểm tra xem liệu một đầu vào cụ thể có thuộc tính đó không. Dù sao, tôi chỉ không muốn mọi người giảm giá nguyên tắc vì nó hoạt động.
zach

6
nó sẽ thất bại trong trường hợp thuộc tính không xuất hiện trong trường hợp $ ("input # A"). attr ("myattr") trả về không xác định thay vì một chuỗi và không xác định.length sẽ thất bại
Rune FS

Chỉ phát hiện một thuộc tính trống so với thuộc tính có nội dung, không thành công trên thuộc tính không tồn tại. Câu hỏi ban đầu là về việc phát hiện sự tồn tại của thuộc tính, làm cho điều này trở thành một câu trả lời cho câu hỏi.
Jimbo Jonny
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.