jQuery 일치하는 클래스에 주어진 ID가 있는지 확인

jQuery는 다음 문과 동일한 ID를 가지고 있습니까?

$('#mydiv').hasClass('foo')

클래스 이름을 제공하고 제공된 ID가 포함되어 있는지 확인할 수 있습니다.

같은 것 :

$('.mydiv').hasId('foo')

여러 선택기 를 결합 하여 해당 논리를 선택기에 적용 할 수 있습니다 . 예를 들어, 특정 클래스가있는 지정된 ID를 가진 모든 요소를 ​​대상으로 지정할 수 있습니다.

$("#foo.bar"); // Matches <div id="foo" class="bar">

이것은 CSS로 작성한 것과 비슷하게 보일 것입니다. 모든 #foo요소에 적용되지는 않으며 (하나만 있어야하지만) 모든 .bar요소에 적용되지는 않습니다 (여러 개가있을 수 있음). 두 속성 모두에 한정된 요소 만 참조합니다.

jQuery 에는 요소에 특정 특성이 있는지 확인할 수 있는 훌륭한 .is방법 도 있습니다. 문자열 선택기, HTML 요소 또는 다른 jQuery 객체에 대해 jQuery 컬렉션을 테스트 할 수 있습니다. 이 경우 문자열 선택기와 비교하여 확인합니다.

$(".bar:first").is("#foo"); // TRUE if first '.bar' in document is also '#foo'

아마 사용하는 것이 $('.mydiv').is('#foo');당신이 ID를 알고 있다면 왜 wouldnt가 방금 처음에 선택에 적용 즉했다?

업데이트 : 질문을 오해하여 죄송합니다 .has(). 답변이 삭제되었습니다 .

또 다른 방법은 .hasId()플러그인 생성

// the plugin
$.fn.hasId = function(id) {
  return this.attr('id') == id;
};

// select first class
$('.mydiv').hasId('foo') ?
  console.log('yes') : console.log('no');

// select second class
// $('.mydiv').eq(1).hasId('foo')
// or
$('.mydiv:eq(1)').hasId('foo') ?
  console.log('yes') : console.log('no');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="foo"></div>
<div class="mydiv"></div>

일부 DOM 객체를 반복하고 특정 ID를 가진 요소를 찾고 포착하려고한다고 가정 해 보겠습니다.

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
</div>

찾을 수 있습니다.

$('#myDiv').find('#bar')

클래스 선택기를 사용하는 경우 find 메서드는 일치하는 모든 요소를 ​​반환합니다.

또는 더 고급 작업을 수행 할 반복 함수를 작성할 수 있습니다.

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
    <div id="fo1"><div>
    <div id="bar1"><div>
    <div id="fo2"><div>
    <div id="bar2"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).attr('id') == 'bar1')
       //do something with bar1
});

클래스 선택자에 대해 동일한 코드를 쉽게 수정할 수 있습니다.

<div id="myDiv">
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).hasClass('bar'))
       //do something with bar
});

index ()로 문제를 해결 해주셔서 기쁩니다. 건배 :)

$('#' + theMysteryId + '.someClass').each(function() { /* do stuff */ });

결국 index ()를 사용하여 이것을 해결했다고 말하십시오.

다른 것은 작동하지 않는 것 같았습니다.

따라서 형제 요소의 경우 먼저 공통 클래스로 선택한 다음 각 특정 클래스에 대해 다르게 수정하려는 경우 좋은 해결 방법입니다.

편집 : (나와 같은) 모르는 사람들을 위해 index ()는 DOM에서의 순서에 따라 0부터 계산하여 선택자와 일치하는 각 요소에 대한 색인 값을 제공합니다. class = "foo"에 얼마나 많은 요소가 있는지 아는 한 ID가 필요하지 않습니다.

분명히 이것이 항상 도움이되는 것은 아니지만 누군가가 유용하다고 생각할 수 있습니다.

요소의 ID가 존재하는지 확인

if ($('#id').attr('id') == 'id')
{
  //OK
}

다음과 같이 id 요소가 사용되는지 확인할 수도 있습니다.

if(typeof $(.div).attr('id') == undefined){
   //element has no id
} else {
   //element has id selector
}

전역 dataTables 및 특정 순서가 지정된 dataTables에이 방법을 사용합니다.