0

私はメニューを持っています:

<ul id="test-ul">
<li>test</li>
<li>test2</li>
</ul>

最初のliの前と最後のliの後に次のHTMLマークアップを追加するにはどうすればよいですか。

 <li class="first">
      <img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15"  />
    </li>

<li class="last">
      <img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15"  />
    </li>

jqueryを使用していますか?

4

5 に答える 5

4

divこれは、ulタグに追加するための有効な構文ではありません。しかし、Jqueryを介してhtmlを追加するという概念を理解するために、ここに行きます

var str = '<div class="first"><img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15"  /></div><div class="last"><img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15"  /></div>';

$("#test-ul").append(str).prepend(str);​​​​​​​​

ここでJsfiddleの例を見ることができます。

于 2012-06-19T12:50:24.537 に答える
2

の前後にこれらの要素を追加しないでくださいliliにネストされている以外の要素ulは無効なHTMLです。

ただし、新しい内にコンテンツを追加することはできますがli、これは有効です。

​$(function(){
   var $li = $("<li></li>");
   $li.html("html code...");
   $("#test-ul").append($li);
   var $li2 = $("<li></li>");
   $li2.html("different html code..");
   $("#test-ul").prepend($li2); 
});​

例を見る

于 2012-06-19T12:48:59.870 に答える
1
$("#test-ul").append("html here");    // after the last li

$("#test-ul").prepend("html here");   // before the first
于 2012-06-19T12:48:49.577 に答える
0

それぞれに新しいLIを作成する場合は、これでうまくいきます。さらにdivを追加すると、問題が発生することに注意してください。

$('div').each(function() {
    var newli = $(this).html().wrap('<li></li>');
    $('#test-ul').append(newli);
});
于 2012-06-19T12:51:36.327 に答える
0
var first = '<li<img src="/sosmck.jpg" width="27" height="15"  /></li>';
var last = '<li><img src="/sosmck.jpg" width="27" height="15"  /></li>';

var myItems = $("li");
myItems.prepend(first);
myItems.append(last);
于 2012-06-19T12:53:18.420 に答える