javascript - 在给定元素之后查找实例

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

添加“编辑”类来模拟输入:

<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