2014-09-05 80 views
1

我有一個關於與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

+0

您是否嘗試過使用'.parent() '擺脫當前可編輯的報價並進入下一個? – APAD1 2014-09-05 18:53:00

+0

我認爲你的問題在於「物品」不斷地越來越深入地嵌套。該結構並不完全遵循邏輯順序。 – 2014-09-05 18:54:14

+0

是的,嘗試過父母()和父母()的各種組合。無法解決。 – 2014-09-05 18:54:53

回答

1

添加類 '編輯' 模擬輸入:

<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 editing">TH2</div> 
      <button>Publish</button> 
     </div> 
</div> 

你可以這樣做:

function findEditable(currentItem) { 

     var nextEditable = undefined, 
      selectors = [".item", ".calendarEntry"]; 

     $.each(selectors , function (idx, selector) { 

      var ref = currentItem.closest(selector); 

      nextEditable = ref.parent() 
       .children("div:gt(" + ref.index() + ")") 
       .find(".offer.editable") 
       .first(); 

      return nextEditable.length === 0; 
     }) 


     return nextEditable; 

    } 

    findEditable($(".editing")).css({ 
     color: 'red' 
    }); 

jsfiddle demo

+0

謝謝@frankfg,但問題是下一個可編輯優惠可能在下一個日曆條目中。鑑於此,父呼叫的數量根據我是否正在編輯當前日曆條目中的最後一個要約而發生變化。 – 2014-09-05 19:20:58

+0

對不起,我希望新提案可以幫助你。 – frankfg 2014-09-05 21:39:10

+0

其實,我並不是在尋找一個蠻力的javascript解決方案(因爲我可以很容易地編寫一個)。我正在尋找一個jQuery的dom導航解決方案。但是,這個解決方案是唯一可行的解​​決方案,我可以複製/粘貼它,而不是自己寫,所以我會接受它 - 謝謝。 – 2014-09-08 14:19:11

1

返回一個可以使用parents()得到.offered元素包含了.offer元素,像這樣:

var offered = $('.offer').find('.editing').parents('.offered'); 

從,你可以用next()就可以進入.offered元素的兄弟.item ELEM耳鼻喉科,以及內找到.editable元素:

offered.next('.item').find('.editable'); 

JSFiddle demo請注意,我已經在您的DEF321項目的.offer元素內手動添加了這個.editing元素 - 我假設這會在您的身邊動態添加,但是無論哪種方式都不包含在您的問題中。


編輯:在問題中的HTML現在已經改變了。在此基礎上,而不是得到的.offered家長,你會得到.item父:

var item = $('.offer').find('.editing').parents('.item'); 

並以同樣的方式繼續像以前一樣:

item.next('.item').find('.editable'); 

JSFiddle demo

+0

感謝您的回答,但它並不適合我。它不涉及下一個可編輯優惠可能在以下日曆條目中的事實。 – 2014-09-05 19:03:12

+0

@EngineerDollery我已經更新了我的答案,以反映對您的問題中的代碼所做的更改。 – 2014-09-05 19:05:37

1

試試這個

var current=document.activeElement, 
    all=$(".editable"), 
    index=all.indexOf(current), 
    next=all[index+1] 

它首先查找當前元素和元素的列表,
那麼它會在列表中找到當前元素。
然後,它將1添加到索引,並從列表中選擇它。

用indexOf函數擴展數組;

if(!Array.prototype.indexOf){ 
    Array.prototype.indexOf=function(e/*,from*/){ 
    var len=this.length>>>0, 
     from=Number(arguments[1])||0; 
    from=(from<0)?Math.ceil(from):Math.floor(from); 
    if(from<0)from+=l; 
    for(;from<len;from++){ 
     if(from in this&&this[from]===e)return from; 
    } 
    return -1; 
    }; 
} 
+0

有趣的方法。我在Firefox中得到一個錯誤,指出indexOf不是一個函數。有其他選擇嗎? – 2014-09-05 19:07:58

+0

也許firefox缺少array.indexOf函數,嘗試通過原型添加它。示例在一分鐘左右。 – SZenC 2014-09-05 19:09:47

相關問題