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