查找给定元素后的实例

Question

我有一个关于与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？

Answer 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

Answer 2

返回一个可以使用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。

Answer 3

试试这个

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; 
    }; 
}