附加的东西作为第n个孩子 - 如果独生子女追加为第一个孩子
我怎么能添加一些东西作为一个div的nth child
id为'selected_panel'
附加的东西作为第n个孩子 - 如果独生子女追加为第一个孩子
- 作为第n个子
- 如果没有孩子作为第一个孩子追加(简单地预先安排)。
- 在“selected_panel”可能是从div
任何的孩子 label
也可能是一个span
,(我不知道是什么类型的HTML元素的将是孩子,所以我真的不能使用事情是这样的:
$("#selected_panel div:nth-child(1)") //This looks only for children with type ''div''
我并不真正熟悉jQuery和我想用最'jQuery的“”的方式写下来,我可以使用if/else语句,但我寻找的东西在jQuery语法中。
创建插件:
$.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>");
<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>
你可以试试这个:
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>
如果有至少n-1
元素,否则将在年底被插入这将插入一个元素作为nth
孩子。
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>'));
其中'n'是我想追加的位置? – 2014-09-23 07:04:19
是的,没错。检查更新的小提琴。 – 2014-09-23 07:07:05
您可以使用“:第n个孩子(1)`没有任何标签。
$("#selected_panel :nth-child(1)")
您可以在这里 http://api.jquery.com/nth-child-selector/ HTTP找到更多的信息://api.jquery。 com /?s = nth-child – 2014-09-23 07:01:00
已经阅读过,我怀疑我会花时间在没有通读的情况下尝试提问。 – 2014-09-23 07:01:43
http://jsfiddle.net/victor_007/Lp9kngp0/3/每个第三个孩子被选中是否它是div标签跨度 – 2014-09-23 07:14:54