jQuery 不允许添加 child

Question

HTML:

<div class="btn-group btn-group-sm">
    <div class="btn-group">
        <button type="button" class="btn btn-default" id="addLftTab">
            Add Left Tab
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default" id="addrghtTab">
            Add Right Tab
        </button>
    </div>
</div>
<ul class="nav nav-tabs" role="tablist">
    <li class="active">
        <a href="#">Passage1</a>
    </li>
</ul>

JS:

$("#addLftTab").on("click", function() {
    $("#tablist > li:first").prepend('<li><a href="#">Passage</a></li>');
});
$("#addrghtTab").on("click", function() {
    $("#tablist > li:last").append('<li><a href="#">Passage</a></li>');
});

我的代码有什么问题吗？我是这个 css 子部分的菜鸟。我试过了，但找不到是什么东西不起作用。使用 bootstrap，jquery 插件 1.8。

Answer 1

1. 您需要为 ul 元素设置一个 id (id="tablist")(因为那是 $('#tablist') 寻找)
2. 然后您必须附加/前置到它而不是 li 元素。

$("#addLftTab").on("click", function () {
    $("#tablist").prepend('<li><a href="#">Passage</a></li>');
});

$("#addrghtTab").on("click", function () {
    $("#tablist").append('<li><a href="#">Passage</a></li>');
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="btn-group btn-group-sm">
    <div class="btn-group">
        <button type="button" class="btn btn-default" id="addLftTab">Add Left Tab</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default" id="addrghtTab">Add Right Tab</button>
    </div>
</div>

<ul class="nav nav-tabs" role="tablist" id="tablist">
    <li class="active">
      <a href="#">Passage1</a>
    </li>
</ul>