Question

我有一个关于使用jquery进行dom导航的问题。我正在尝试找到一个给定类的元素，该元素在给定元素后面的dom中最接近。

我有一个类似于结构的表，通过div创建并在css中设置样式。我有一个正在编辑的元素，当用户按下回车时，我想要关注以下可编辑元素。但是，它不是正在编辑的元素的兄弟。

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的报价。我有代码使div可编辑，方法是将其替换为类offer editing的文本字段。如果他们正在编辑此日历条目中的最终报价，那么回车键应该关注以下日历条目的第一个可编辑报价（如果有）。如果我们位于列表的最底层，我不想回到顶部（我认为无论如何都会使问题过于复杂）。

我坚持的是如何找到下一个优惠（所有优惠都是可编辑的）。

这是我尝试过的：

var nextOffer = $('.offer').find('.editing').next('.editable');

显然，这不起作用。问题是，以下可编辑的优惠不是当前正在编辑的优惠的兄弟，因此next()对我不起作用。以下优惠可以在当前日历条目中，也可以在下一个日历条目中。无论哪种方式，它都是几个div，在不同的深度。

我是否可以使用jquery dom遍历执行此操作，或者我最好通过javascript强制执行此操作（即循环遍历所有.editable个实例并返回.editing之后的实例？

Answer 1

您可以使用parents()获取包含.offered元素的.offer元素，如下所示：

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

您可以使用next()进入.offered元素的兄弟.item元素，并在其中找到.editable元素：

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

<强> JSFiddle demo 即可。 请注意，我已在DEF321项目的.editing元素中手动添加了此.offer元素 - 我认为这是动态添加的，但无论如何都不是＆＃39 ; t包含在您的问题中。

修改：问题中的HTML现已更改。基于此，您不会获得.offered父母，而是获得.item父母：

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

以与以前相同的方式继续前进：

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

JSFiddle demo

Answer 2

试试这个

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

Answer 3

添加“编辑”类以模拟输入：

<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

查找给定元素后的实例

3 个答案: