programing

jQuery 일치하는 클래스에 지정된 ID가 있는지 확인합니다.

codeshow 2023. 10. 19. 22:52
반응형

jQuery 일치하는 클래스에 지정된 ID가 있는지 확인합니다.

다음 문장의 jQuery has id equivalent는 무엇입니까?

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

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

다음과 같은 것.

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

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

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

이것은 당신이 CSS에서 쓰는 것과 비슷하게 보여야 합니다.모두에게 해당되지는 않습니다.#foo요소(단 하나만 있어야 함에도), 모든 요소에 적용되지는 않습니다..bar(많은 요소가 있을 수 있음에도)두 특성 모두에 적합한 요소만 참조합니다.

jQuery는 어떤 요소가 특정한 특성을 가지고 있는지를 판단할 수 있게 해주는 훌륭한 방법을 가지고 있습니다.문자열 선택기, HTML 요소 또는 다른 jQuery 개체에 대해 jQuery 컬렉션을 테스트할 수 있습니다.이 경우 문자열 선택기와 비교해 보겠습니다.

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

아마 제가 사용할 것입니다.$('.mydiv').is('#foo');그렇다고 해서 ID를 알고 있다면 왜 처음부터 선택자에게 적용하지 않는 겁니까?

update: 죄송합니다 질문을 잘못 이해하여 제거됨.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')

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

아니면 더 발전된 작업을 할 반복 함수를 작성할 수 있습니다.

<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
});

인덱스()로 문제를 해결해 주셔서 기쁩니다.이것이 같은 문제를 가진 다른 사람들에게 도움이 되길 바랍니다.건배 :)

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

제가 결국 index()를 이용해서 이 문제를 풀었다고 말씀드리겠습니다.

다른 것은 아무 것도 통하지 않는 것 같았습니다.

따라서 형제 요소의 경우 공통 클래스로 먼저 선택한 다음 특정 클래스마다 다른 내용을 수정하려는 경우 이를 해결하는 것이 좋습니다.

EDIT: 모르는 사람들을 위해 (나와 같이) 인덱스()는 DOM에서 순서에 따라 0부터 세어 선택기와 일치하는 각 요소에 대한 인덱스 값을 제공합니다.클래스="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
}

글로벌 데이터Table 및 특정 순서 데이터Table에 대해 이 방법을 사용합니다.

언급URL : https://stackoverflow.com/questions/2253457/jquery-determine-if-a-matched-class-has-a-given-id

반응형