Jquery—parent()、parents()、closest()的区别

先看代码：

<div>
        <ul>
            <li><span>li1</span></li>
            <li><span>li2</span></li>
            <li><span>li3</span></li>
            <li><span>li4</span></li>
            <li><span>li5</span></li>
        </ul>
</div>

$("span").click(function () {
                if ($(this).text() == "li1") {
                    $(this).parent().css("background-color", "green");
                }
                else if ($(this).text() == "li2") {
                    $(this).parents().css("background-color", "gray");
                }
                else if ($(this).text() == "li3") {
                    $(this).closest("ul").css("background-color", "red");
                }
});

1、parent()

获取匹配的第一个父元素。如上所示，当点击<span>li1</span>时，只改变它的首个父级li的背景色。

2、parents()

获取匹配的除根节点外所有父级元素。如上所示，当点击<span>li2</span>时，li->ul->div的背景色都将改变。

3、closest()

获取与之第一次匹配的父级元素，即从当前元素一直往上查找，直到查找到为止，返回结果只有0或者1个。如上所示，当点击<span>li3</span>时，ul的背景色将改变。

PS：$(this).closest("span").css("background-color", "red"); 改变的是它本身。