Có cách nào để tìm kiếm các thuộc tính bắt đầu bằng một chuỗi nhất định trong HTML

Question

Có cách nào để tìm tất cả các phần tử có thuộc tính bắt đầu bằng một chuỗi cụ thể không?

Tôi đang sử dụng framework Mootools và đây là những gì tôi đã cố gắng:

$$('*[data-media-*]'); 

Nhưng nó chỉ kết quả đầu ra tất cả các yếu tố trong trang.

Vì vậy, có cách nào để có được tất cả các yếu tố trong trang có thuộc tính bắt đầu bằng, data-media- không?

Answer 1

bạn có thể lọc các phần tử mà bạn đã phải trả về các phần tử có thuộc tính data- * phù hợp.

Elements.implement({ 
    filterData: function(substring){ 
     return this.filter(function(element){ 
      var attribs = element.attributes, 
       len, 
       ii = 0; 

      for (len = attribs.length; ii < len; ++ii) { 
       if (attribs[ii].name.indexOf('data-') === 0 && attribs[ii].name.indexOf(substring) !== -1) { 
        return true; 
       } 
      } 
     }); 

    } 
}); 

console.log($$("div").filterData('foo')); 
console.log($$("div").filterData('bar')); 
console.log($$("div").filterData('oba')); 

trong hành động: http://jsfiddle.net/dimitar/pgZDw/

Nhược điểm: bạn đã cần phải vượt qua nó trên một tập hợp các yếu tố có ý nghĩa, ví dụ. div.foo hoặC#someid *

một giải pháp thanh lịch hơn sẽ có thêm một giả :data() để Slick:

(function(){ 
    // cache reusable string 
    var data = 'data', 
     hyphen = '-', 
     // set the fallback via XMLSerializer, if no outerHTML (eg. FF 2 - 10) 
     XS = this.XMLSerializer && new XMLSerializer(); 

    Slick.definePseudo(data, function(value){ 
     return (this.outerHTML || XS.serializeToString(this)).test([data, value].join(hyphen)); 
    }); 
}()); 


console.log($$("div:data(foo)")); 
console.log($$(":data(media-)")); 

dụ Cập nhật: http://jsfiddle.net/dimitar/pgZDw/3/

Answer 2

$$('div[attrName="attrnameValue"]').each(function() { 
    // `this` is the div 
}); 

Answer 3

Bạn có thể xấp xỉ một cái gì đó như thế này bằng cách duyệt qua các thuộc tính cho mỗi phần tử trong container, và nhìn thấy cho dù tên thuộc tính phù hợp với một regex cho những gì bạn đang tìm kiếm:

Ví dụ, in this jsFiddle, I am looking for li elements with the data-media-tv and data-media-dvd properties.

Bạn có thể điều chỉnh regex để chỉ trả về những gì bạn muốn xem. Bạn chỉ muốn xem các phần tử có dữ liệu - media- * (như trong câu hỏi của bạn)? Here you go.

---

Hãy nhớ rằng không chính xác khả năng mở rộng. Vì chúng tôi đang lặp qua từng phần tử trên trang và kiểm tra từng thuộc tính duy nhất (nhưng quay lại sớm nếu được tìm thấy), điều này có thể và có thể sẽ chậm đối với các trang lớn.

Giới hạn điều này CHỈ với vùng chứa bạn muốn tìm kiếm hoặc chỉ các yếu tố bạn muốn lặp qua! Nếu bạn chạy điều này với document.body, nó sẽ lặp qua từng phần tử trong trang, tôi sẽ không chịu trách nhiệm nếu ngôi nhà của bạn bị cháy. :)

---

Dưới đây là chức năng-ized:

function attrMatch(elements, regexp) { 
    // Iterate through all passed-in elements, return matches 
    var matches = elements.filter(function(li) { 
    var numAttr = li.attributes.length; 
    for(x=0;x<numAttr;x++) { 
     var attr = li.attributes[x]; 
     return attr['name'].test(regexp); 
    } 
    }); 

    return matches; 
}; 

Trong elements, chỉ vượt qua trong những yếu tố mà bạn muốn kiểm tra, có thể được lựa chọn thông qua $$. Nếu bạn muốn kiểm tra tất cả các phần tử trong phần tử vùng chứa, hãy thay thế elements bằng container và container.getChildren() trong mỗi trường hợp element ở trên.

Answer 4

thử this jsfiddle chỉ biết (phổ biến) index/vị trí thuộc tính data-media-* và sử dụng trong mã tương ứng.