Cách lấy tất cả các thuộc tính HTML bắt đầu bằng thứ gì đó (tên thuộc tính, * không * giá trị của chúng!)

Tôi muốn nhận tất cả các phần tử/nút trong trang HTML có chứa các thuộc tính bắt đầu bằng thứ gì đó (một lần nữa, tên thuộc tính bắt đầu bằng thứ gì đó, không phải giá trị của chúng!). Ví dụ: TinyMCE có xu hướng thêm thuộc tính tùy chỉnh vào các yếu tố tùy chỉnh mà bạn lưu, chẳng hạn như "mce_style", "mce_href", "mce_bogus", v.v. Tôi muốn có một cái gì đó như bộ chọn CSS3 cho các giá trị thuộc tính, [attr^="mce_"], nhưng không cho giá trị tên thuộc tính.Cách lấy tất cả các thuộc tính HTML bắt đầu bằng thứ gì đó (tên thuộc tính, * không * giá trị của chúng!)

Tất nhiên, tôi có thể lặp qua tất cả các nút DOM và thuộc tính của chúng và kiểm tra từng cái một, nhưng tôi đã tự hỏi liệu có một cách hiệu quả hơn hay không.

Xin vui lòng không cho tôi câu trả lời TinyMCE cụ thể, tôi khá chắc chắn có một lá cờ mà sẽ ngăn chặn TinyMCE để lưu các thuộc tính này, nhưng câu hỏi là chung chung.

Nguồn

2012-04-25 AsGoodAsItGets

Tôi có cảm giác rằng bạn sẽ phải lặp qua từng phần tử và xem qua từng thuộc tính. Thậm chí 'document.querySelectorAll()' không có tùy chọn 'attribute-name-starts-with'. Câu hỏi thú vị. –

Tôi không biết gì về TinyMCE, nhưng nếu có một số cách để xác định các thành phần có * bất kỳ thuộc tính nào thì bạn có thể thu hẹp tìm kiếm của mình thành tập hợp con trước, sau đó xem từng thuộc tính của tập hợp con, nhanh hơn nhiều so với nhìn toàn bộ mái vòm. Nghĩa là, có một số thuộc tính sẽ luôn được thêm vào một trong các mục tiêu của bạn không? Nếu vậy thì hãy tìm điều đó trước. –

@jamietre Yeah, như xa như TinyMCE là có liên quan, bạn có thể giả định ví dụ 'mce_href' sẽ luôn được áp dụng cho các phần tử' a', vì vậy bạn có thể thu hẹp tìm kiếm của mình. Nhưng như tôi đã nói trong câu cuối, tôi không tìm kiếm câu trả lời cụ thể cho TinyMCE, tôi muốn có một giải pháp chung, và đánh giá từ những câu trả lời tôi đã có, không có cách nào khác ngoài việc lặp qua tất cả các phần tử và thuộc tính của họ. Pitty. – AsGoodAsItGets

-1

Hãy thử điều này: (Tôi đã thử đặt * thay vì a thẻ nhưng nó màu tất cả các yếu tố kể cả những người không có mce_style thuộc tính cũng)

a[mce_style] { color : red; }

Demo: http://jsfiddle.net/Tcdmb/

Thông tin thêm: https://developer.mozilla.org/en/CSS/Attribute_selectors

Nguồn

2012-04-25 10:16:28 codef0rmer

Bạn có thể muốn đọc lại câu hỏi ... – McGarnagle

Ok. Điều này phần nào giải quyết vấn đề của mình nhưng không thể sử dụng * hoặc% trong 'mce_ * 'để chọn tất cả các phần tử có thuộc tính với' mce_' làm tiền tố. – codef0rmer

here's a simple demo để tìm tất cả các phần tử có thuộc tính bắt đầu bằng mce_. có thể cần một số sàng lọc.

function getMCE() { 
    var el, attr, i, j, arr = [], 
     reg = new RegExp('^mce_', 'i'),    //case insensitive mce_ pattern 
     els = document.body.getElementsByTagName('*'); //get all tags in body 

    for (i = 0; i < els.length; i++) {     //loop through all tags 
     el = els[i]         //our current element 
     attr = el.attributes;       //its attributes 
     dance: for (j = 0; j < attr.length; j++) {  //loop through all attributes 
      if (reg.test(attr[j].name)) {    //if an attribute starts with mce_ 
       arr.push(el);       //push to collection 
       break dance;       //break this loop 
      } 
     } 
    } 
    return arr; 
} 

console.log(getMCE())

Nguồn

2012-04-25 11:06:05 Joseph

Vâng, đây là giải pháp rõ ràng, lặp đi lặp lại thông qua tất cả các yếu tố và các thuộc tính của chúng, quá tốn kém đối với các DOM lớn. – AsGoodAsItGets

+1 cho 'break dance': D –

-1 cho' break dance' bởi vì nó sẽ phá vỡ thuộc tính đầu tiên của một phần tử phù hợp. Một phần tử có thể có nhiều thuộc tính phù hợp. Nhưng tổng thể mã ở trên dường như là giải pháp duy nhất vào lúc này. – AsGoodAsItGets

Hãy thử điều này:

CHỨC NĂNG

//custom selector expression 
$.extend($.expr[':'],{ 
attr:function(o,i,m){ 
    var attrs=$.getAttrAll(o),re=m[3],found=false; 
    $.each(attrs,function(k,v){ 
    if(new RegExp(re).test(v)) { return found=true;} 
}); 
return found; 
} 
}); 
// get all atrributes of an element 
$.getAttrAll=function(el){ 
    var rect = []; 
    for (var i=0, attrs=el.attributes, len=attrs.length; i<len; i++){ 
    rect.push(attrs.item(i).nodeName); 
    } 
    return rect; 
};

' SỬ DỤNG

// calling custom selector expression :attr(regexp) 
$(function(){ 
    $('body').find(':attr("^mce_")').css({background:'yellow'}); 
});

HTML

<body> 
    <p mce_style="height:50px" id="x" data-hello="hello">selected</p> 
    <div not_mce_bogus="abc">not_mce_bogus</div> 
    <div mce_href="http://rahenrangan.com">selected</div> 
    <p>othrs</p> 
</body>

Nguồn

2012-04-25 13:08:50

Điều này về cơ bản là một chút thanh lịch hơn nhưng tôi nghi ngờ một chút ít hiệu suất, dựa trên jQuery viết lại mã được đăng bởi Joseph dưới đây. Nó vẫn phải đi qua từng phần tử và từng thuộc tính thông qua DOM. Hơn nữa, việc sử dụng ví dụ bạn đề cập chỉ xem xét các con của thẻ body, việc sử dụng đúng sẽ là 'find()' thay vì 'children()' (mặc dù trong HTML đơn giản của bạn nó sẽ hoạt động). Tôi đoán tôi phải sống với thực tế là không có cách nào tốt hơn để làm điều đó. – AsGoodAsItGets

ya u r rite. cảm ơn –

Một lựa chọn, nếu bạn không nhớ tạm thời thay đổi DOM của bạn, là để trích xuất HTML của bạn thành một chuỗi và tìm kiếm các thuộc tính thông qua RegExp. Khi bạn tìm thấy các thuộc tính, bạn có thể nối thêm một "kim" trong DOM để bạn có thể sử dụng jQuery để chọn các phần tử.

Dưới đây là một khái niệm làm việc (chạy với giao diện điều khiển mở):

http://jsfiddle.net/skylar/N43Bm/

Code:

$.fn.extend({ 

    findAttributes: function(attribute) { 

     var attributeFinder = new RegExp(attribute + '(.+)="', "gi"); 
     var elementHTML = this.html().replace(attributeFinder, "data-needle='pin' "+attribute+"$1=\""); 

     this.html(elementHTML); 

     return this.find("[data-needle=pin]").removeAttr('data-needle'); 
    } 

}); 

console.log($("body").findAttributes('mce_'));

Lưu ý: regexp của tôi là không lớn. Bạn sẽ phải chăm sóc tốt hơn tôi có trong ví dụ này.

Nguồn

2012-04-25 20:19:14

Cách lấy tất cả các thuộc tính HTML bắt đầu bằng thứ gì đó (tên thuộc tính, * không * giá trị của chúng!)

Trả lời

Các vấn đề liên quan