부분 속성을 기반으로 HTML 찾기

Question

부분 속성을 기반으로 요소를 찾으려면 javascript (특히 jQuery)와 함께 이름이일까요?

나는이 링크에서 참조 된 부분 속성 값을 찾을 수 셀렉터의를 찾고 있지 않다 :

• starts with [이름^= "값을"]
• contains prefix [이름 | = "값" ]
• contains [* 이름 = "값"]
• contains word [~ 이름 = "값"]
• ends with [$ 이름 = "값"]
,
• equals [NAME = "값"]
• not equal [이름! = "값"]
• starts with [NAME^= "값"]
  라인을 따라

하지만 더 것을 F에

<div data-api-src="some value"></div> 
<div data-api-myattr="foobar"></div> 

및

$("[^data-api]").doSomething() 

ind "data-api"로 시작하는 속성을 갖는 요소.

$.fn.filterData = function(set) { 
    var elems=$([]); 
    this.each(function(i,e) { 
     $.each($(e).data(), function(j,f) { 
      if (j.substring(0, set.length) == set) { 
       elems = elems.add($(e)); 
      } 
     }); 
    }); 
    return elems; 
} 

같이 사용할 수 :

$('div').filterData('api').css('color', 'red'); 

그리고 어떤 요소와 일치합니다 당신이 찾고 있지만, 단지이 글을 쓰는 몇 분을 소비하고 무엇

Answer 1

확실하지 않음 data-api-*과 같은 데이터 속성을 사용하고 더 많은 옵션 등을 포함하도록 확장하고 수정할 수 있지만 지금은 데이터 속성 만 검색하고 '시작'과 일치하지만 적어도 사용하기 간단합니다.

FIDDLE

Answer 2

이 data-api-* 속성을 가지고 그 사람들에게 후보를 제한하는 .filter() 사용합니다. 아마도 가장 효율적인 접근 방식은 아니지만 먼저 관련 선택기를 사용하여 검색 범위를 좁힐 수 있다면 유용합니다.

$("div").filter(function() { 
    var attrs = this.attributes; 
    for (var i = 0; i < attrs.length; i++) { 
     if (attrs[i].nodeName.indexOf('data-api-') === 0) return true;  
    }; 
    return false; 
}).css('color', 'red'); 

데모 : http://jsfiddle.net/r3yPZ/2/

---

이 또한 선택과 같이 쓸 수있다. 여기 내 초보자 시도입니다 :

$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) { 
    for (var i = 0; i < obj.attributes.length; i++) { 
     if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true; 
    }; 
    return false; 
}; 

사용법 :

$('div:hasAttrWithPrefix(data-api-)').css('color', 'red'); 

데모 : http://jsfiddle.net/SuSpe/3/

이 셀렉터는 jQuery를 사전 1.8 버전의 작동합니다. 1의 경우.8 이상, some changes may be required. 여기에 1.8 호환 버전의 시도는 다음과 같습니다

$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) { 
    return function(obj) { 
     for (var i = 0; i < obj.attributes.length; i++) { 
      if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true; 
     }; 
     return false; 
    }; 
}); 

데모 : http://jsfiddle.net/SuSpe/2/ 더 일반적인 솔루션을

---

, 여기 정규식 패턴을 소요하고 그 패턴과 일치하는 속성을 가진 요소를 선택하는 선택이야 : 당신의 예를 들어

$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) { 
    var re = new RegExp(regex); 
    return function(obj) { 
     var attrs = obj.attributes 
     for (var i = 0; i < attrs.length; i++) { 
      if (re.test(attrs[i].nodeName)) return true; 
     }; 
     return false; 
    }; 
}); 

,이 같은 작업을해야합니다 :

을

$('div:hasAttr(^data-api-.+$)').css('color', 'red'); 

데모 : http://jsfiddle.net/Jg5qH/1/이