使用jQuery取決於其他HTML

Question

我有一些代碼，如下

<div class="box coursebox"> 
    <h3 class="main"><a title="GCSE English" href="http://vle.sheffcol.ac.uk/moodle/course/view.php?id=1656">GCSE English</a> </h3> 
</div> 
<div class="box coursebox"> 
    <h3 class="main"> <a title="GCSE Maths" href="http://vle.sheffcol.ac.uk/moodle/course/view.php?id=1526">GCSE Maths</a> </h3> 
    <div class="assign overview"> 
    <div class="name"> Assignment: <a title="Assignment" href="http://vle.sheffcol.ac.uk/moodle/mod/assign/view.php?id=59691">Algebra assignment 1</a> </div> 
    <div class="name"> Assignment: <a title="Assignment" href="http://vle.sheffcol.ac.uk/moodle/mod/assign/view.php?id=59691">Algebra assignment 1</a> </div> 
    </div> 
</div> 

我想這樣做，使用jQuery HTML

<span class="button" id="button">Show activities</span> 

以下位添加到每個coursebox什麼添加HTML在H3標籤之後如果有一個div.overview作爲孩子。

首先，這是可能的，如果是的話，怎麼樣？

感謝

基蘭

Answer 1

是的，它是可能的，試試這個：

$(".coursebox").has("div.overview").each(function() { 
    $("h3", $(this)).after("<span class=\"button\" id=\"button\">Show activities</span>"); 
}); 

Example fiddle

Answer 2

嘗試這種解決方案

$(".coursebox").has("div.overview").each(function(){ 
    var $span = $("<span>") 
     .addClass('button') 
     .attr('id','button') 
     .text('Show activities'); 

    $span.insertAfter($(this).find('H3.main')) 

});​​​​​​​ 

Answer 3

var spanEl = $('<span/>', { 
id: "button", 
class: "button", 
text: "Show activities" 
}); 
$("h3", $(this)).after(spanEl);