jQuery不允许添加子项

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>');
});

Is there anything wrong in my code? I am noob in this css child section. I tried but unable to find what is making not work. using bootstrap, jquery plugin 1.8.

我的代码有什么问题吗?我是这个css儿童部分的菜鸟。我尝试但无法找到无法正常工作的东西。使用bootstrap,jquery插件1.8。

4 个解决方案

#1

You need to set an id (id="tablist") to the ul element (as that is what $('#tablist') looks for)

你需要为ul元素设置一个id(id =“tablist”)(这就是$('#tablist')寻找的东西)

then you must append/prepend to that and not the li elements.

那么你必须追加/前置,而不是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>

#2

ID in UL tag is missing, it should be:

缺少UL标签中的ID,它应该是:

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

#3

You need to put an ID on your <ul>

您需要在

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

    </li>
</ul>

I've created a fiddle for you:

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

http://jsfiddle.net/4e084p1g/

#4

You should use attribute selector like below:

你应该使用如下的属性选择器:

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

If you want your jquery code to be the same then just assign the id to that element.

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

#1

You need to set an id (id="tablist") to the ul element (as that is what $('#tablist') looks for)