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

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?

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

$(":checkbox[myattr]")

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
}

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

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

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

Trong JavaScript, ...

null == undefined

... trả về true*. Đó là sự khác biệt giữa ==và ===. 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.

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

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.

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

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+']');
}

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

đơn giản:

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

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

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') ) { ...

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] và [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á.

Để 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)
}

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