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

缺少UL标签中的ID，应该是：

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

Answer 2

您需要在<ul>

上添加ID

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

    </li>
</ul>

我为你创造了一个小提琴：

http://jsfiddle.net/4e084p1g/

Answer 3

您需要为id="tablist"元素设置一个ID（ ul ）（，因为$('#tablist')正在寻找 ）
然后你必须追加/前置，而不是li元素。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

您应该使用attribute selector，如下所示：

$('[role="tablist"] > li:first')//since you used role attribute

如果您希望您的jquery代码相同，那么只需将id分配给该元素。

jQuery不允许添加孩子

4 个答案: