jQuery获取元素的父元素。

Question

我正在尝试使用以下代码获取一个项目的父级项目。

(父级项目的内容)

例如，在下面的示例中，“Item 1.1”的父级将是“Item 2”。

项目：

        <ul class="sortable" id="page-list">

            <li><div>Item 1</div></li>
            <li><div>Item 2</div>
                <ul>
                    <li><div>Sub Item 1.1</div></li>
                    <li><div>Sub Item 1.2</div></li>
                    <li><div>Sub Item 1.3</div></li>
                    <li><div>Sub Item 1.4</div></li>
                </ul>
            </li>

        </ul>

Javascript：

            function saveNewList() {
            //get DIV contents in order
            var divContents = [];
            $("ul.sortable > li div").each(function() { divContents.push($(this).text()) });
            var quotedCSV = '"' + divContents.join('", "') + '"';
            $("#results").text(quotedCSV);
            //get DIV parents' contents in order
            var divParents = [];
            // something needs to go here...
            var quotedCSVparents = '"' + divParents.join('", "') + '"';
            $("#results2").text(quotedCSVparents);


        }

- Andy Fleming

Answer 1

$(this).parents('li:has(ul)').children('div:first').text();

这将遍历到最近的具有子<ul>的<li>，然后向下到其第一个<div>子级并获取文本。

如果在上层<li>元素中，也会获取文本。这是期望的吗？如果不是，请添加.parent()，如下所示：

$(this).parent().parents('li:first').children('div:first').text();

这样做可以避免在不在内部的<li>时获取文本。

- user113716

---

divParents.push($(this).parent().parents('li:first').children('div:first').text()) 工作得非常好！ - Andy Fleming

@DesignerGuy - 很高兴它起作用了。另一种稍微少遍历一些的方法是$(this).closest('ul:not(.sortable)').prev().text()。 - user113716

Answer 2

"Sub Item 1.1"的父元素技术上是包裹它的<li>标签：

<li><div>Sub Item 1.1</div></li>

但是你可以使用.parent()向上移动一个步骤：

$([selector that targets <div>sub item 1.1</div>]).parent().parent().parent().find('div')

首先，.parent() 方法将带您到 <li> 元素，第二个则将带您到 <ul>，第三个则将带您到主要的 <li>，而 .find('div') 则会将您带回到 <div>Item 2</div>。

- CrayonViolent

---

这将从子项目起点起作用，但是在到达父级后，你不会想使用.find('div')。它将找到所有嵌套的<div>元素，包括子项，并返回所有它们的文本。不过使用.children('div')就没问题了。 - user113716