indexOf（）を使用しているときにjQuery replaceWith（）が正しく機能しない

Question

このコードで何が問題になっていますか？私は状況に応じて別一つずつimgを交換したい...

jQueryの（私は多分それはthis.srcを認識していない、主な問題は、IF条件内にあると思います）：

$(document).ready() { 
    $("#firstdiv img").replaceWith(function() { 
     if(this.src.IndexOf("soccer2") > -1) { 
      return $("<img src='/images/soccer ball.jpg'/>") 
     } 
    }) 
} 

HTML ：

<div id="firstdiv" class="divvv"> 
    <img src="/images/Soccer.jpg" width="60" height="60" alt="soccer icon" /> 
    <img src="/images/soccer2.jpg" alt="soccer icon" width="60" height="60" /> 
</div> 

Answer 1

が含まれています。それは次のようになります。indexOfは

$(document).ready(function() { 
 
    $("#firstdiv img").replaceWith(function() { 
 
    if (this.src.indexOf("soccer2") > -1) {    
 
     return $("<img src='/images/soccer ball.jpg' alt='replace one' />"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="firstdiv" class="divvv"> 
 
    <img src="/images/Soccer.jpg" width="60" height="60" alt="soccer icon" /> 
 
    <img src="/images/soccer2.jpg" alt="soccer icon" width="60" height="60" /> 
 
</div>

Answer 2

OPコード内replaceWithデフォルトundefinedによって返され、画像要素がDOMから削除されない場合に条件が満たされた場合にのみ返します。また

、IndexOfはindexOf（小文字i）でなければならないことに注意してください

ここで非作業コードのdemoです。

ただし、条件が偽であれば同じ要素を返すことで問題は解決できますが、

$("#firstdiv img").replaceWith(function() { 
    if(this.src.indexOf("soccer2") > -1) { 
     return $("<img src='/images/soccer ball.jpg'/>") 
    } 

    // else, return the same element 
    return this.outerHTML; 
}); 

---

より良いアプローチは、属性を使用することですあなたはIndexOfにタイプミスがあり、セレクタ

$('#firstdiv img[src*="soccer2"]').replaceWith('<img src="/images/soccer ball.jpg"/>'); 

Demo