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中添加一个新的li，如下所示：

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

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

或

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

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

Answer 2

您可以使用child选择器：

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

或:first选择器：

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

请注意，您要覆盖这些值而不是连接它们，您应该+=而不是=;

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

Answer 3

那是因为该div下面有两个ul个元素。你有两个选择。

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

或

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