속성별 요소 선택

속성별 요소 선택

생성된 ID가 있는 확인란 모음이 있으며 일부 확인란에는 추가 속성이 있습니다.JQuery를 사용하여 요소에 특정 속성이 있는지 확인할 수 있습니까?예를 들어, 다음 요소에 "myattr" 속성이 있는지 확인할 수 있습니까?속성 값은 다를 수 있습니다.

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

예를 들어, 이 특성을 가진 모든 확인란의 컬렉션을 하나씩 확인하지 않고 어떻게 얻을 수 있습니까?이것이 가능합니까?

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

편집:

위의 것들은 다음과 같습니다.else-언제나.myattr존재하지만 빈 문자열 또는 "0"입니다.문제가 있는 경우 명시적으로 테스트해야 합니다.undefined:

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

그것들을 선택할 수 있다는 뜻입니까?그렇다면 예:

$(":checkbox[myattr]")

질문을 받은 지 오래되었다는 것을 알지만, 저는 수표가 이렇게 더 명확하다는 것을 알게 되었습니다.

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

(이 사이트에서 확인할 수 있음)

is에 대한 설명서는 여기에서 찾을 수 있습니다.

이렇게 하면 됩니다.

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

자바스크립트에서...

null == undefined

...돌아온다true그것은 사이의 차이입니다.==그리고.===또한 그 이름은undefined정의할 수 있습니다(같은 키워드가 아닙니다).null그래서 다른 방법을 확인하는 것이 좋습니다.가장 신뢰할 수 있는 방법은 아마도 반환 값을 비교하는 것입니다.typeof교환입니다.

typeof o == "undefined"

그럼에도 불구하고, null과 비교하는 것은 이 경우에 효과가 있습니다.

가정하면undefined사실 정의되지 않았습니다.

$("input[attr]").length더 나은 선택일 수도 있습니다.

"typeof", jQuery ".is" 및 ".filter"를 사용하여 몇 가지 아이디어를 제시했기 때문에 저는 그것들에 대한 빠른 성능 비교를 게시하려고 생각했습니다.의 유형이 이 작업에 가장 적합한 것 같습니다.다른 것들은 작동하지만, 이 작업을 위해 jq 라이브러리를 호출할 때 분명한 성능 차이가 있는 것으로 나타납니다.

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

이 게시물에서와 같이, 사용.is속성 선택기[]기능(또는 프로토타입)을 쉽게 추가할 수 있습니다.

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

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

속성이 있는 모든 요소 선택 외에도$('[someAttribute]')또는$('input[someAttribute]')클릭 핸들러와 같이 객체에 대한 부울 검사를 수행하는 기능도 사용할 수 있습니다.

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

모든 컬렉션을 가져오려면checkbox여러 속성을 기반으로 한 요소(예: 이 경우)id그리고.myattr:

var checkboxCollection = $(":checkbox[id][myattr]");

수집의 각 확인란에 이벤트 핸들러를 할당해야 하는 경우:

$(":checkbox[id][myattr]").change(function() {
    if(this.checked) {
        var valueOfAttribute = $(this).attr('myattr');
        // code here
    }
    else{
        // code here
    }
});

위에서 설명한 바와 같이 의도된 동작으로 npm 패키지를 만들었습니다.

[npm] 및 [github]에 대한 링크

사용법은 매우 간단합니다.예:

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

true를 반환합니다.

낙타 케이스에도 사용할 수 있습니다.

특정 속성을 가진 요소를 선택하려면 위의 답변을 참조하십시오.

저는 지된 jQuery 요정있성확는이인다다사를 반환하는 .true의 첫 과 같은속성이 : ajQuery 컬렉번요소다있경는우이성:

/** 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)
}

속성이 지정된 HTML 요소에 있는 경우 값 속성 값에 쉽게 액세스할 수 있습니다.

var offORonlinePath="../img/";   //We can easy to change the path anytime
var extension=".webp"; //we can later change any value like png,jpg,...

$("img[data-src]").each(function(){
  var imgName=$(this).data("src");

  $(this).attr("src",offORonlinePath+imgName+extension);

})

간단히:

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

추가 정보: 공식 문서

JQuery는 속성을 문자열로 반환합니다.따라서 이 문자열의 길이를 확인하여 가 설정되어 있는지 확인할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/1097522/select-elements-by-attribute