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);


        }

Answer 1

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

这将遍历最近的<li>，其中包含子<ul>，然后是第一个<div>子项并获取文本。

当您位于上<li>元素时，这也会获得文本。这是期望的吗？如果没有，只需添加.parent()，如下所示：

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

当您不在内部<li>时，这应该避免获取文本。

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>

jQuery获取项目父项

2 个答案: