Javascript 查找给定元素后面的实例

我有一个关于使用jquery进行dom导航的问题。我试图找到一个元素，该元素具有一个给定的类，该类在dom中紧跟在一个给定元素之后

我有一个类似于表的结构，通过div创建，并使用css样式。我有一个正在编辑的元素，当用户按enter键时，我想聚焦以下可编辑元素。但是，它不是正在编辑的元素的同级

HTML

显然，这是行不通的。问题是，下面的可编辑提供不是当前正在编辑的提供的兄弟，因此next对我不起作用。以下报价可能在当前日历条目中，也可能在下一个日历条目中。不管是哪种方式，它都离我们几格远，在不同的深度

我甚至可以通过jquery dom遍历来实现这一点，或者我最好通过javascript强制执行它，即循环所有.editable实例并在.editing之后返回一个实例？

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

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

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

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

。请注意，我已经在您的DEF321项目的.offer元素中手动添加了此.editing元素-我假设您会动态添加此元素，但您的问题中不包括任何一种方式

编辑：问题中的HTML现在已更改。基于此，您将获得.item父项，而不是.provided父项：

并以与之前相同的方式进行：

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

.

试试这个

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

---

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

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

---

您是否尝试过使用.parent从当前的可编辑报价中跳出，进入下一个可编辑报价？我认为您的问题是，项目的嵌套越来越深。结构不完全遵循逻辑顺序。是的，尝试了各种父级和父级的组合。无法解决。这是我代码中的一个输入错误，我会修正它。谢谢。谢谢你的回答，但这对我来说并不管用。它不涉及下一个可编辑的报价可能在以下日历条目中的事实。@EngineerDollery我已更新了我的答案，以反映您问题中对代码所做的更改。有趣的方法。我在firefox中发现一个错误，表明indexOf不是一个函数。有其他选择吗？也许firefox缺少array.indexOf函数，请尝试通过prototype添加它。示例将在一分钟左右完成。谢谢@frankfg，但问题是下一个可编辑的报价可能在下一个日历条目中。有鉴于此，家长呼叫的数量会根据我是否正在编辑当前日历项中的最后一个提议而变化。对不起，我希望新提议能帮助您。事实上，我并不是真的在寻找暴力javascript解决方案，因为我自己可以很容易地编写一个。我正在寻找jquery dom导航解决方案。但是，这个解决方案是唯一有效的，我可以复制/粘贴它，而不是自己编写，所以我会接受它-谢谢。

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

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

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