jquery .prev()奇怪的行为

时间:2013-05-30 20:49:39

标签: javascript jquery dom traversal

我有一个非常简单的LI列表,它们都在同一级别(没有嵌套)我想找到任何元素的前一个元素,它的类是level1。出于某种原因,当'level1'元素超过一个兄弟时,prev()对项目失败。我不想使用prevAll(),因为我只想要在我的元素之前的最接近的li并且具有level1类。

<ul id="main-list">
    <li class="level1" data-id="1" data-parent="none" id="recordsArray_1">Overview</li>
    <li class="level2" data-id="4" data-parent="Overview" id="recordsArray_4">Benefits</li>
    <li class="level2" data-id="2" data-parent="undefined" id="recordsArray_2">Core Concepts</li>
    <li class="level2" data-id="3" data-parent="undefined" id="recordsArray_3">Access</li>
    <li class="level3" data-id="5" data-parent="Access" id="recordsArray_5">Onboarding</li>
    <li class="level1" data-id="12" data-parent="none" id="recordsArray_12">test top</li>
    <li class="level2" data-id="10" data-parent="test top" id="recordsArray_10">test 1</li>
    <li class="level2" data-id="14" data-parent="undefined" id="recordsArray_14">New Access</li>
    <li class="level3" data-id="13" data-parent="New Access" id="recordsArray_13">test 2</li>
    <li class="level1" data-id="6" data-parent="none" id="recordsArray_6">Underview</li>
    <li class="level2" data-id="7" data-parent="Underview" id="recordsArray_7">coolpage1</li>
    <li class="level3" data-id="9" data-parent="coolpage1" id="recordsArray_9">page level 3</li>
</ul>

<script>
var publishList = $('#main-list li');

$.each(publishList, function () {
    var thisClass = $(this).attr('class');
    var parentID = $(this).attr('data-parent');
    var recordID = $(this).attr('data-id');

    if (thisClass == 'level2') {
        var thisParent = $(this).prev('.level1').html();
        console.log(this);    
    }
}); 
</script>

控制台输出:

Overview
undefined
undefined
test top
undefined
Underview

我做错了什么?我希望prev()返回核心概念,访问和新访问的概述,但它们将返回未定义。我的逻辑有缺陷吗?

3 个答案:

答案 0 :(得分:3)

尝试.prevAll().first()

的组合
var thisParent = $(this).prevAll('.level1').first().html();

无论距离远近,这都将确保您始终获得最接近的兄弟姐妹。

试试此代码

var publishList = $('#main-list li');

$.each(publishList, function () {
    var $this = $(this),
        thisClass = $this.attr('class'),
        parentID = $this.attr('data-parent'),
        recordID = $this.attr('data-id');

    if (thisClass == 'level2') {
        var thisParent = $this.prevAll('.level1').first().html();
        $('#output').append($this.prevAll('.level1').first().html()+'<br />');
    }

});

<强> Check Fiddle

答案 1 :(得分:1)

.prev()未提供您想要的功能。您正在寻找的功能位于.prevAll()

.prevAll()获得一组值后,您可以使用类似.first()的内容来获取所需内容(如上所述)或按ID识别最接近的元素(即{{1}基于数字的id或类似的方法)。无论你决定采用它,.split()都无法满足你的需求。

答案 2 :(得分:0)

只需用

更新你的if语句
    if (thisClass == 'level2' && $(this).prev('.level1').length) {