Question

我有一个由UL（以及Lis ofc。）用HTML表示的经典根结构。我需要做的是当我点击我的任何LI项目（或者实际上是元素，因为它只包含s）时，我想得到它的LIs父母的文本和文本。

继承我的无序列表样本（已经包装）：

<ul>
    <li class='firstLevel'><a href='#'>1</a>

        <ul>
            <li><a href='#'>11</a>
            </li>
            <li><a href='#'>12</a>
            </li>
        </ul>
    </li>
    <li class='firstLevel'><a href='#'>2</a>

        <ul>
            <li><a href='#'>21</a>

                <ul>
                    <li><a href='#'>211</a>
                    </li>
                    <li><a href='#'>212</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>22</a>

                <ul>
                    <li><a href='#'>221</a>

                        <ul>
                            <li><a href='#'>2211</a>
                            </li>
                            <li><a href='#'>2212</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href='#'>222</a>

                        <ul>
                            <li><a href='#'>2221</a>
                            </li>
                            <li><a href='#'>2222</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class='firstLevel'><a href='#'>3</a>
    </li><br>
    <li class='firstLevel'><a href='#'>4</a>

        <ul>
            <li><a href='#'>41</a>
            </li>
            <li><a href='#'>42</a>
            </li>
        </ul>
    </li>
</ul>

例如，当我点击3时，我只得到3，＆＃39;因为它没有父母。但如果我点击2222元素，我应该得到2222,222,22和2输出。

我的想法是：首先，我应该点击一个级别的UL，我已经使用此代码完成了此操作：

$("li").click(function (e) {
    var cnt = $(e.target).parents('ul').length;
});

在cnt变量中存储了plunge级别 - 所以当我点击2222元素时，cnt = 4.（4因为root alredy返回1，而不是0。）

下一步是获取此父元素的文本。我尝试使用jQuerys .eq（）函数来处理这些元素，但它无法正常工作。继承了我的考验：

$("li").click(function (e) {
    var cnt = $(e.target).parents('ul').length;
    vat outputString = '';
    cnt--;
    for (var i = 0; i < cnt; i++) {
        outputString += $(e.target).parents('li').eq(cnt).text();
        outputString += '###'; //texts separator
    }
});

但是这种方法会返回所有LI项目文本（包括他的后代），因此它返回整个树文本结构。

总结我的问题 - 我应该如何继续获得所需的输出功能？

下面是一个例子：http://jsfiddle.net/F548m/1/

Answer 1

.text将始终返回元素的所有后代的组合文本。您想要的似乎是a元素的li子元素的文本，而不是li元素本身的文本。

因此，考虑到这一点，这应该做你想要的：

$("li").click(function (e) {
    var text = $(this).parents('li').map(function() {
        return $(this).children('a').text());
    }).get();
    text.unshift($(this).children('a').text();
    var outputString = text.join('###');
});

DEMO

这将获取所点击元素的所有li个祖先，并将它们映射到a个孩子的文本值。然后，它将点击的元素a子元素的文本值添加到数组的begnning中。值的顺序是从单击的元素到根。

如果你想要反过来，即点击元素的值最后，代码实际上变得更简单了：

$("li").click(function (e) {
    var text = $(this).parents('li').addBack().map(function() {
        return $(this).children('a').text());
    }).get();
    var outputString = text.join('###');
});

Answer 2

我认为.parents()可以帮助你

Check demo

Answer 3

您需要获取a

的文字

var str=$(this).find("a:first").text();

 $.each($(this).parents("li"), function (i, v) {
        str+=", "+$(this).find("a:first").text();
 });

 alert(str);
 e.stopPropagation();

http://jsfiddle.net/F548m/3/

Answer 4

你应该使用jQuery.closest（）函数。

jQuery：选择LI的父文本

4 个答案: