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')) {）が動作することを示す警告ポップアップが表示されるので、これを知っています。

しかし、問題は、最初の要素（選択されていない要素）またはすべての要素に適用できるということです。

私が使用している場合：結果は、ページ上の唯一の非常に最初の再発、NOT選択したものに適用されている

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

。私が使用している場合

はまた：

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

そして、その結果は、それがだけでなく選択されたもの、ページ上のすべての再発を適用しています。それは選択されたものだけであるはずです。

jQueryコードは、ifステートメントで選択した要素にのみ適用できますか？ .repeated-element、
B内部例えば

、

A））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のメソッドは、シナリオに応じて、特定のユースケースを持っていると述べました。

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

Answer 2

あなたが唯一の選択した要素に興味を持っている場合は、任意のイベントハンドラから直接DOMを使用することができます。私は非常にちょうどこの場合filter()を使用してお勧めします。

$('.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>