if 문으로 선택한 요소에만 jquery를 적용하는 방법은 무엇입니까?

Question

페이지에서 특정 요소를 선택하려고합니다. 모든 요소는 동일한 클래스를 가지며 배경 이미지가 일부는 예외입니다.

내가해야 할 일은 if 문을 통해 선택한 요소에만 jquery 코드를 적용하는 것입니다.

HTML을 편집 할 수 없으므로 jquery를 사용해야합니다. 내가 잘하고 JQuery와 실행 요소를 선택한

$('.repeated-element').each(function(){ 
    if ($(this).css('background-image').indexOf('mystringzzz')) { 
    //do something 
     alert("works"); 
     $(this).closest('div.someclass').addClass('aclassilike'); 
    //stop loop 
     return false; 
    } 
}); 

:

여기 내 코드입니다. 나는 그 부분 (if ($(this).css('background-image').indexOf('mystringzzz')) {)가 작동하는 것을 보여주는 경보 팝업을 받기 때문에 이것을 안다.

그러나 문제는 첫 번째 요소 (선택한 요소가 아닌 요소) 또는 모든 요소에만 적용 할 수 있다는 것입니다.

내가 사용하는 경우 :

$(this).closest('div.someclass').addClass('aclassilike'); 

결과는 페이지, NOT 선택된 하나에 오직 최초의 재발에 적용됩니다.

내가 사용 또는 경우 :

$('.repeated-element').closest('div.someclass').addClass('aclassilike'); 

그런 다음 결과는 페이지 뿐만 아니라 선택한 사람에 모든 재발을 적용합니다. 그것은 단지 선택된 것으로되어 있습니다.

if 문을 통해 선택한 요소에만 jquery 코드를 적용 할 수 있습니까? 예를 들어

,

a)는 .repeated-element,
B 내부) ONLY mystringzzz,
C의 화상 이름 부분이 외부 스타일에 background-image CSS를 포함하는) 다음 적용 새 jquery (이 예제에서는 다른 클래스 추가).
d) mystringzzz 문자열을 포함하지 않는 요소에는 background-image을 적용하지 마십시오.

Answer 1

indexOf() 호출에서 색인이 -1과 같지 않은지 확인하지 못했습니다. 당신이 당신의 질문의 원래 형식이 작성했다 경우는 다음과 같이 보일 것이다 : 모든 존재와

$('.repeated-element').each(function() { 
    if ($(this).css('background-image').indexOf('mystringzzz') !== -1) { 
    //do something 
     alert("works"); 
     $(this).closest('div.someclass').addClass('aclassilike'); 
     //stop loop 
     return false; 
    } 
}); 

는 jQuery의 방법은 시나리오에 따라 특정 사용 사례가 말했다. 내가보기 엔 그냥이 경우 filter()를 사용하는 것이 좋습니다 것 : 만 선택한 요소에 관심이 있다면

$('.repeated-element').filter(function() { 
    return $(this).css('background-image').indexOf('mystringzzz') !== -1; 
}).closest('div.someclass').addClass('aclassilike'); 

Answer 2

당신은 어떤 이벤트 핸들러에서 직접 DOM을 사용할 수 있습니다.그것은 당신을 보인다

$('.repeated-element').click(function(){ 
    if ($(this).css('background-image').indexOf('mystringzzz')) { 
    //do something 
     alert("works"); 
     $(this).closest('div.someclass').addClass('aclassilike'); 
    //stop loop 
     return false; 
    } 
}); 

Answer 3

또한,

$('.repeated-element').each(function() { 
 
    // removing url and only getting the image 
 
    var getURL = $(this).css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, ""); 
 
    if (getURL.indexOf('mystringzzz') !== -1) { 
 
    $(this).closest('div.someclass').addClass('aclassilike'); 
 
    } 
 

 
});

.repeated-element { 
 
    color: red 
 
} 
 

 
.aclassilike { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='someclass'> 
 
    <div style='background-image:url("mystringzzz")' class='repeated-element'>1</div> 
 
</div> 
 

 
<div class='someclass'> 
 
    <div class='repeated-element'>1</div> 
 
</div> 
 
<div class='someclass'> 
 
    <div class='repeated-element'>1</div> 
 
</div> 
 
<div class='someclass'> 
 
    <div style='background-image:url("mystringzzz")' class='repeated-element'>1</div> 
 
</div>