jquery - jqueryを使用して他のhtmlに応じて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>

H3 タグの後の各 coursebox に、子として div.overview がある場合。

まず、これは可能ですか？

ありがとう

キーラン

Answer 1

はい、可能です。これを試してください：

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

フィドルの例

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);