如何使用jQuery獲得獨立於文檔結構的最接近或先前的對象？

Question

范例1：

<ul>
   <li id="o1" class="elem">foo1</li>
   <li id="o2" class="elem">foo2</li>
   <li id="o3" class="elem">foo3</li>
</ul>

**$('#o2').exactly_previous('.elem') ----> returns #o1**

范例2：

<ul>
   <li id="o1" class="elem">foo1
      <ul>
         <li id="o11" class="elem"></li>
      </ul>
   </li>
   <li id="o2" class="elem">foo2</li>
   <li id="o3" class="elem">foo3</li>
</ul>

**$('#o2').exactly_previous('.elem') ----> returns #o11
$('#o11').exactly_previous('.elem') ----> returns #o1**

范例3：

<ul>
   <li id="o1" class="elem">fooX</li>
</ul>
<ul>
   <li id="o2" class="elem">fooX</li>
</ul>

**$('#o2').exactly_previous('.elem') ----> returns #o1**

范例4：

<a id="o1" class="elem">fooX</a>
<ul>
   <li id="o2" class="elem">fooX</li>
</ul>

**$('#o2').exactly_previous('.elem') ----> returns #o1**

希望您能理解我的問題！ 謝謝。

Answer 1

像這樣：

function exactly_previous($this, selector)
{
    var $all = $(selector);
    return $all.eq($all.index($this)-1);
}

測試：

• http://jsfiddle.net/mattball/9aU2H
• http://jsfiddle.net/mattball/9N7aQ
• http://jsfiddle.net/mattball/3VguQ
• http://jsfiddle.net/mattball/VBC87

將其轉換為jQuery插件留給讀者練習。

Answer 2

為什么不看看jQuery .closest（） API。 可能您需要一些東西。

另外，還要看看.find（） API，它可能有助於遍歷DOM對象。

Answer 3

嘗試這個

  $('#o2').parent().find('li').slice($('#o2').index() -1,$('#o2').index())

演示