jquery에서 특정 속성 값을 가진 모든 요소 찾기


88

특별한 속성 값을 가진 모든 요소를 ​​찾아야합니다.

여기에 내가 찾아야 할 div가 있습니다.

<div imageId='imageN'>...

나는 단순히 가지고있는 div를 반복해야합니다. imageId='imageN'


6
class="imageN"유효한 HTML을 위해 사용 하는 것이 좋습니다 . 또는 data-imageId="imageN"유효한 HTML5를 위해. 전자를 사용하면 클래스 선택기를 사용할 수 있습니다.
Andy E

Andy, 그 이유는 이러한 div가 코드 숨김에서 동적으로 추가되고 ImageId는 다르지만 클래스는 동일하기 때문입니다.
Pabuc

3
class="image imageN"도움이된다면 여러 클래스를 가질 수 있습니다 .
Val

이미 같은 클래스가있는 경우 클래스 이름을 선택하지 않는 이유는 무엇입니까?
Praxis Ashelin 2013 년

답변:


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

어떤 값에 관계없이 속성의 유일한 존재를 확인하려면 대신 ths 선택기를 사용할 수 있습니다. $('div[imageId]')


4
@ThiefMaster-속성 값이 일정하지 않은 경우 (즉, 달라질 수 있음) 어떻게 찾을 수 있습니까?
개발자

몇 가지 질문 : 1- 다른 요소는 어떻습니까 ... 2- 다른 값은 어떻습니까? ... 여러 요소에 대해 data-food 속성을 가질 수 있습니다 . div, img, td, 각각 다른 값을가집니다.
dsdsdsdsd 2013 년

@ParthoGanguly 다음과 같이 변수를 사용합니다. $ ( 'div [imageId = "'+ variableName + '"]')
Kama

1
이 솔루션은 실제로이 페이지의 제목에 대답하지 않습니다. div 인 요소를 검색하고 있습니다. 적절한 솔루션은 실제 요소와 무관 한 솔루션입니다.
AndroidDev

164

질문에 대한 정확한 답은 아니지만, 단순히 주어진 속성 이름 (속성 값으로 필터링하지 않음)을 가진 요소 (잠재적으로 다른 태그 이름) 컬렉션을 가져 오는 방법을 검색 할 때 여기에 도착했습니다. 다음이 잘 작동한다는 것을 알았습니다.

$("*[attr-name]")

이 페이지에 도착한 누군가가 저와 똑같은 것을 찾는 데 도움이되기를 바랍니다. :).

업데이트 : 별표가 필요하지 않은 것 같습니다. 즉, 몇 가지 기본 테스트를 기반으로 할 때 다음은 위와 동일한 것으로 보입니다 (이를 지적한 Matt에게 감사합니다).

$("[attr-name]")

완전한! 내가 찾던 바로 그것.
Paulius Matulionis 2013 년

아마도 ... 나는 성능 측면을 확인하지 않았습니다 (당시에는 중요한 요소가 아니 었습니다).
sammy34 2014 년

3
그것과 어떤 차이가 $("[attr-name]")있습니까? (ie no *)
Matthew

예, 그들 사이에는 특정한 차이가 있습니다. firefox에서 별 표기법 발생 오류 !!!! (
이스케이프되지 않은

여기에 속성 값을 포함 할 수도 있습니다. 예 :$("[data-toggle='modal']")
MeltingDog

12

태그라고하는 것이 아닙니다. 당신이 찾고있는 것을 html 속성이라고합니다.

$('div[imageId="imageN"]').each(function(i,el){
  $(el).html('changes');
  //do what ever you wish to this object :) 
});

5

속성의 부분 값을 사용하여 (^) 기호를 사용하여 DOM 요소를 감지 할 수 있습니다. 예를 들어 다음과 같은 div가 있습니다.

<div id="abc_1"></div>
<div id="abc_2"></div>
<div id="xyz_3"></div>
<div id="xyz_4"></div>...

코드를 사용할 수 있습니다.

var abc = $('div[id^=abc]')

다음으로 시작하는 id를 가진 div의 DOM 배열을 반환합니다 abc.

<div id="abc_1"></div>
<div id="abc_2"></div>

다음은 데모입니다. http://jsfiddle.net/mCuWS/


4

문자열 연결을 사용하십시오. 이 시도:

$('div[imageId="'+imageN +'"]').each(function() {
    $(this);   
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.