jquery 获取下级相同元素并遍历 jquery获取相邻的下一个节点

JQuery中对节点的遍历

1、Next()方法获取节点后的挨着的一个同辈元素

2、Nextall()用于获取节点后的所有同辈元素

3、Siblings()方法用于获取所有同

当然，在next、nextAll和siblings后的括号内，也可以增加条件，取得相应元素的值。如下代码：

$("div").click(function () { alert($(this).next().text()); }); //点击div时，得到挨着的下一个元素的text

$("div").click(function () { alert($(this).next("p").text()); });//点击div时，如果挨着div的下一个是p，则得到p的text，否则为空

$("div").click(function () { alert($(this).nextAll().text()); });//点击div时，得到其后面所有元素的text

$("div").click(function () { alert($(this).nextAll("div").text()); });//点击div时，得到其后面所有div的text

$("div").click(function () { alert($(this).nextAll("p").text()); });//点击div时，得到其后面所有p元素的text

$("div").click(function () { $.each($(this).nextAll("div"), function () 

{ $(this).css("color","red")}); }); //点击div时，遍历其后所有的div元素，将他们的字体颜色全部改为红色

$("div").click(function () { $(this).nextAll().css("background", "green"); }); //JQuery中会自动隐形迭代，因此这个是上一行代码的更简单的写法

$("div").click(function () { $(this).css("background", "red"); 

$(this).siblings("div").css("background", "green");})//点击div时，给当前元素设置红色背景，其他div为绿色背景

$("div").click(function () { $(this).css("background", "red").siblings("div").css("background", "green"); })//链式编程使得上一行代码更加简单。

动态创建Dom节点

JQuery中，可以使用$(html字符串)方式来创建Dom节点，并且返回一个JQuery对象，然后调用append等方法将新创建的节点添加到Dom中：

$(function () {
            var app= $("<div>动态创建节点</div>'");
            $("div:first").append(app);
        })

以下是常用的动态创建节点的方法：

Append 在元素的末尾追加元素

Prepend 在元素之前追加元素，append和prepend都是创建子节点的

After 在元素之后添加元素（兄弟）

Before 在元素之前添加元素（兄弟）after和before可以创建兄弟节点或同级节点

Remove()删除选择的节点

Empty（）是将节点清空

Remove()所删除的节点，只是逻辑删除，并不是物理删除，它所得到的对象是删除的节点，如下：

$(function () {

  $("#remove").click(function () {

删除class是warning的li

将class是warning的li添加到class不是warning的li的最后一个li后面

  })

})