Jquery获取上级、同级、下级元素

一、下面介绍JQUERY的父,子,兄弟节点查找方法

查找$(jquery)的父节点

$(jquery).parent() 

查找$(jquery)的所有父元素,不限于父元素

$(jquery).parents()

查找$(jquery)的子节点,只会找子节点,不会找所有子节点

$(jquery).children()

查找$(jquery)上一个兄弟节点,不是所有的兄弟节点

$(jquery).prev()

查找$(jquery)之前的所有兄弟节点

$(jquery).prevAll()

查找$(jquery)的下一个兄弟节点,不是所有的兄弟节点

$(jquery).next()

查找$(jquery)之后的所有兄弟节点

$(jquery).nextAll()

查找$(jquery)兄弟姐妹节点,不分前后

$(jquery).siblings()

二、简单的测试代码

<div class="box"> <div class="content" data-content="这是内容"> <p>jquery上级,同级,下级</p> <ul class="li-parent"> <li>jpg <input type="text" value="1"></li> <li>png <input type="text" value="2"></li> <li>pdf <input type="text" value="3"></li> <li>jpeg <input type="text" value="4"></li>
Jquer——本案例中的$("li")就是$(jquery)
<script>
    $(function () {
        // 作用于li去查找
        $("li").click(function () {
            // 打印自己的文本内容
            console.log($(this).text()); 
            //打印父级ul的class属性的值:li-parent, parent这个例子里父级只能是指”ul“,
            console.log($(this).parent().attr("class"));   
            //打印父级class="content"的属性 data-content的值:这是内容, parents可以指ul,也可以指 class="content"的div, class="box"的div
            console.log($(this).parents(".content").data("content"));    
            //打印下级input的值
            console.log($(this).children("input").val());