我有一個關於與jQuery的dom導航的問題。我試圖找到一個給定元素後面的dom中最接近的元素。查找給定元素後的實例
我有一個類似於結構的表格,通過div創建並在css中進行了樣式化。我正在編輯一個元素,並且當用戶按下Enter時,我想要關注以下可編輯元素。但是,它不是正在編輯的元素的兄弟。
HTML
<div class="calendarEntry">
<div when="2014,9,18" class="when">Sep 18</div>
<div class="items">
<div class="item">
<div code="ABC" class="type">ABC123</div>
<div offered="2014,9,15" class="offered dateish">Sep 15
<div class="offer editable">10</div>
<div class="sku editable">TH1</div>
<button>Publish</button>
</div>
</div>
<div class="item">
<div code="DEF" class="type">DEF321</div>
<div offered="2014,9,14" class="offered dateish">Sep 14
<div class="offer editable">10</div>
<div class="sku editable">TH2</div>
<button>Publish</button>
</div>
</div>
<div class="item">
<div code="GHI" class="type">GHI852</div>
<div offered="2014,9,12" class="offered dateish">Sep 12
<div class="offer editable">10</div>
<div class="sku editable">TH3</div>
<button>Publish</button>
</div>
</div>
</div>
</div>
注:有在頁面上有多個日曆條目。
假定用戶正在編輯DEF312項目的報價。當他們擊中輸入時,我想編輯GHI852的報價。我有讓代碼可編輯的代碼,用offer editing
的類替換它。如果他們正在編輯此日曆條目中的最終商品,則回車鍵應該關注以下日曆條目的第一個可編輯商品(如果有)。如果我們在列表的最底部,我不想回到頂部(我認爲這會使問題過於複雜)。
我堅持的一點是如何找到下一個報價(所有報價都是可編輯的)。
這是我已經試過:
var nextOffer = $('.offer').find('.editing').next('.editable');
顯然,這是行不通的。問題是,以下可編輯優惠不是正在編輯的當前優惠的兄弟,所以next()
不適用於我。以下優惠可能在當前的日曆條目中,或者可能在下一個日曆條目中。無論哪種方式,這是幾個divs,在不同的深度。
可我甚至爲此與jQuery DOM遍歷,還是我好只是蠻力迫使它通過JavaScript(即循環遍歷所有.editable
實例後.editing
?
您是否嘗試過使用'.parent() '擺脫當前可編輯的報價並進入下一個? – APAD1 2014-09-05 18:53:00
我認爲你的問題在於「物品」不斷地越來越深入地嵌套。該結構並不完全遵循邏輯順序。 – 2014-09-05 18:54:14
是的,嘗試過父母()和父母()的各種組合。無法解決。 – 2014-09-05 18:54:53