查找img標籤並用另一個標籤替換

Question

我如何才能找到img標籤，並使用jQuery替換爲span標籤？

<style> 
    .box{ 
     display:inline-block; 
     width:100px; 
     height:20px; 
     line-height:20px; 
     font-size:11px; 
    } 
</style> 

<p id="recommend"> 
    <img src="search.gif" alt="find"> <!-- find this img tag without id and class--> 
</p> 

<!-- next --> 

<p id="recommend"> 
    <span class="box">search</span><!-- replace this --> 
</p> 

Answer 1

您可以使用jQuery的replace()或replaceWith()方法來實現你想什麼。

這裏是鏈接到他們的用法：

https://api.jquery.com/category/manipulation/dom-replacement/

http://api.jquery.com/replacewith/

Answer 2

<style> 
.box{display:inline-block;width:100px;height:20px;line-height:20px;font-size:11px;} 
</style> 

<p id="recommend"> 
    <img src="search.gif" class="find"> <!-- find this img tag without id and class--> 
</p> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('<span class="box">search</span>').replaceAll('img.find'); 
    // OR... 
    $('img.find').replaceWith('<span class="box">search</span>'); 
}); 
</script> 

https://api.jquery.com/replaceAll/

http://api.jquery.com/replacewith/

Answer 3

正如有人說，ID應b獨特。相反，您可以使用class爲多個元素共享相同的類名稱。在這裏，我舉個例子來實現這一目標：

的Html

<p class="recommend"> 
    <img src="search.gif" alt="find" /> 
    <!-- find this img tag without id and class--> 
</p> 
<!-- next --> 
<p class="recommend"> 
<span class="box">search</span> 
<!-- replace this --> 
</p> 

jQuery的

$('.recommend').first().find('img').remove().end().html(function(){ 
    return $(this).siblings().find('span.box'); 
}); 

或

$('img').replaceWith(function(){ 
return $(this).parent().next().find('span.box'); 
}); 

添加.html()如果要更換圖像與跨度的內容。

DEMO - 檢查元素以查看替換內容。