Question

如何将某些内容添加为ID为nth child

的div的'selected_panel'

作为第n个孩子。
如果没有孩子追加为第一个孩子（只是前置）。
＆quot; selected_panel＆＃39;可以是div到label的任何内容 span或他们可能是// This looks only for children with type ''div'' $("#selected_panel div:nth-child(1)")。

即：我不知道哪些类型的HTML元素将成为孩子，所以我不能真正使用以下内容：

{{1}}

Answer 1

你可以试试这个：

<强> JS：

$(document).ready(function () {
    var e = $('<div>New Child</div>'); //New child to be added
    var c = $('#selected_panel').children(); //gets the children of div
    if (c.length) {                         //if there are children inside the div
        var l = c.length;
        $('#selected_panel>*:nth-child(' + l + ')').after(e);
    } else {                                //if there is no child
        $('#selected_panel').append(e);
    }
});

您可以根据要添加新孩子的位置更改l的值。

示例HTML：

<div id="selected_panel">
    <div>AADsd</div>
    <div>AADssdd</div>
    <div>asdfAADsd</div>
    <div>AADssdd</div>
    <div>AADsdsd</div> <span>sdfsadfsa</span>
 <span>sert3dfsadfsa</span>
 <span>s457647dfsadfsa</span>

    <p>er</p>
</div>

演示：http://jsfiddle.net/GCu2D/350/

Answer 2

如果至少有nth元素，这将插入一个元素作为n-1子元素，否则它将在最后插入。

var n = 7;
var len = $("#selected_panel").children().length;
var index = (len >= n) ? n-1 : len;
$("#selected_panel").find(':nth-child(' + index + ')').after($('<div>bar</div>'));

http://jsfiddle.net/jtr2wd7b/1/

Answer 3

你可以使用＆＃39;：nth-child（1）`没有任何标签。

$("#selected_panel :nth-child(1)")

Answer 4

创建插件：

＆＃13;

$.fn.nthorfirst = function (path, i) {
    var elems = this.find(path);
    if (elems.length > i) return elems.eq(i);
    else return this;
}

$('#selected_panel').nthorfirst('> *', 2).before("<div> Done! </div>");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="selected_panel">
    <p>Lorem</p>
    <div>Lipsum</div>
    <a href="#"> Dolor </a>
</div>

＆＃13;

附加作为第n个孩子的东西 - 如果只有孩子附加为第一个孩子

4 个答案: