jQuery的插入DIV UL

Question

我有以下HTML結構：

<div class="list-comments one"> 
    <ul> 
     <li> 
      <span>1</span> 
      <p class="title"><a href="#">Welcome!</a></p> 
      <div class="list-subcomments" style="display: none;"> 
       <div class="list-comments two"> 
        <ul> 
         <li> 
          <span>2</span> 
          <span style="text-align:center;">Josh</span> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </li> 
    </ul> 
</div> 

而且我想添加一個新麗在第一UL，像這樣：

var html = ''; 
html = '<li>'; 
html = '<span>1</span>'; 
html = '<p class="title"><a href="#">Antoher Welcome!</a></p>'; 
html = '<div class="list-subcomments" style="display: none;">'; 
html = '<div class="list-comments two">'; 
html = '<ul></ul>'; 
html = '</div>'; 
html = '</div>'; 
html = '</li>'; 
$(".one ul").append(html); 

我只是把它想被添加到第一個ul中，但它添加了兩個ul。

Answer 1

您可以使用child選擇：

$(".one > ul").append(html); 

還是:first選擇：

$(".one ul:first").append(html); 

請注意，您將覆蓋值而不是連接它們，您應該+=而不是=;

var html = ''; 
html += '<li>'; 
html += '<span>1</span>'; 
// ... 
html += '</li>'; 

Answer 2

$(".one ul:first").append(html); 

或

$(".one > ul").append(html); 

小提琴 - http://jsfiddle.net/D7RF3/

Answer 3

這是因爲該div下面有兩個ul元素。你有兩個選擇。

$('.one ul').first().append(html); 

或

$('.one > ul').append(html);