jquery .prev() странное поведение

Question

У меня очень простой список LI, и все они на одном уровне (ничего не вложен). Я хочу найти предыдущий элемент любого элемента, который является классом level1. По какой-то причине prev() не работает на элементах, когда элемент 'level1' больше одного брата. Я не хочу использовать 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() вернет обзор основных понятий, доступа и нового доступа, но они возвращаются не определенно. Есть ли недостаток в моей логике?

Answer 1

Попробуйте сочетание .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

Answer 2

Просто обновить, если заявление с этой

if (thisClass == 'level2' && $(this).prev('.level1').length) { 

Answer 3

.prev() не обеспечивает функциональность вы хотите. Функциональность вы ищете в .prevAll()

После того, как у вас есть набор значений из .prevAll() вы можете использовать что-то вроде .first(), чтобы получить то, что вам нужно (как уже упоминалось) или определить ближайший элемент по идентификатору (т.е. .split() идентификатор на основе числа или какой-либо подобный метод). Однако вы решите пойти по этому поводу, .prev() не получит вас, что вы хотите.