检查元素是否在 jQuery 中的另一个元素之前或之后

Question

假设我有这个标记

<h3 id="first">First</h3>
<p>Hi</p>
<p>Hello</p>
<h3 id="second">Second</h3>
<p>Bye</p>
<p>Goodbye</p>

，如何以编程方式检查某个元素（例如其中一个 p）是否位于第一个 h3 之后和第二个 h3 之前，用 jQuery？

我正在尝试做这样的事情：

$(p).each(function(){
   if($(this).isAfter("#first") && $(this).isBefore("#second")) {
     // do stuff
   }
});

Answer 1

如果 sel 是一个真正的选择器，Rocket 的解决方案可以正常工作，但如果您传递 jquery 对象，它就不起作用。

如果您想要一个同时适用于选择器和 jquery 对象的插件，只需使用我稍微修改过的版本即可：

(function($) {
    $.fn.isAfter = function(sel){
        return this.prevAll().filter(sel).length !== 0;
    };

    $.fn.isBefore= function(sel){
        return this.nextAll().filter(sel).length !== 0;
    };
})(jQuery);

感谢 Rocket 的原始解决方案。

Answer 2

要查看一个元素是否在另一个元素之后，可以使用 prev()或 prevAll() 获取前一个元素，然后查看如果匹配的话。

要查看一个元素是否在另一个元素之前，您可以使用 next() 或 nextAll() 获取下一个元素，并且看看是否匹配。

$.fn.isAfter = function(sel){
  return this.prevAll(sel).length !== 0;
}
$.fn.isBefore= function(sel){
  return this.nextAll(sel).length !== 0;
}

演示：http://jsfiddle.net/bk4k7/

Answer 3

您可以使用 index() 函数：

$('p').each(function(){
   var index = $(this).index();
   if(index > $("#first").index() && index < $("#second").index()) {
     // do stuff
   }
});

Answer 4

这是一个 小提琴

$('p').each(function() {
    previousH3 = $(this).prevAll('h3');
    nextH3 = $(this).nextAll('h3');

    if (previousH3.length > 0 && nextH3.length > 0) {
        $(this).css('color', 'red')
    }

});

Answer 5

我实现了一个通用的 isAfter 函数，它考虑了深度和 DOM 树，并且可以正确确定 a 是否在 b 之后，即使它们在 2 中不同的子树：

<div>
  <div>
    <p class="first">I come first</p>
  </div>
</div>

<div>
  <div>
    <p class="second">I come second</p>
  </div>
</div>

您可以在 我的 GitHub 存储库 中找到它。感谢您对代码的反馈

Answer 6

答案：

$.fn.isAfter = function(sel){
    return this.prevAll(sel).length !== 0;
}
$.fn.isBefore= function(sel){
    return this.nextAll(sel).length !== 0;
}

无论选择器 (sel) 如何，都会选择所有先前的元素或下一个元素，因此我进行了以下修改，根据类选择元素：

$.fn.isAfter = function(sel){
    sel = "." + sel.attr("class").replace(/ /g, ".");

    return this.prevAll(sel).length !== 0;
}
$.fn.isBefore= function(sel){
    sel = "." + sel.attr("class").replace(/ /g, ".");

    return this.nextAll(sel).length !== 0;
}

Answer 7

此版本适用于任何深度，比较两个元素是否在彼此之前、相等或之后。分别返回 -1、0 和 1。

它的工作原理是获取传递给比较函数的元素的所有索引偏移量。

然后它比较两个偏移量数组，并在发现差异时停止迭代。

var topElement = $("span").eq(0);
var bottomElement = $("span").eq(2);

var res = compare(topElement, bottomElement);

console.log("The compare result is: " + res)



function getOffsets(el)
{
  var res = new Array();
  
  while(el.length > 0)
  {
    res.push(el.index());
    el = el.parent();
    }
  
  return res.reverse();
}

function compare(a, b)
{  
  var offA = getOffsets(a);
  var offB = getOffsets(b);
  
  
  for(let i = 0; i < offA.length + 1; i++)
  {
        let delta = (offA[i] || -1) - (offB[i] || -1);
    
    if(delta < 0)
      return -1;
    else if(delta > 0)
      return 1;
  }
  
  return 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <span>1</span>
</div>
<div>
    <div>
        <span>2</span>
    </div>
</div>
<div>
    <div>
        <div>
            <span>3</span>
        </div>
    </div>
</div>

Answer 8

此单行检查适用

于本示例中使用的问题中的每种情况 ID：

document.getElementById("first") === document.querySelectorAll("#second, #first")[0]

querySelectorAll 方法中的 ID 顺序不相关，只需要使用在这种情况下选择两个元素的选择器#第二，#第一。

如果您需要多次使用此功能，则可以使用此函数：

function isBeforeElement( first_id, second_id ) {
    return document.querySelectorAll('#' + first_id + ', #' + second_id)[0] === document.getElementById(first_id);
}

即使在特殊情况下，此函数也不会出现错误：

1. 如果未找到两个元素，则将返回false
2. 如果第二个元素未找到，它将返回true
3. 如果第一个元素未找到它将返回false

Answer 9

记住 Rocket 的答案，我更喜欢使用 .index() 方法，如下所示：

$.fn.isAfter = function(sel){
    return $(this).index() > $(sel).index();
};
$.fn.isBefore= function(sel){
    return $(this).index() < $(sel).index();
};

它似乎更适合阅读/理解，并且在行选择中完美工作。

Answer 10

如果所讨论的元素是兄弟元素（它们在原始问题中），则前面的答案可以正常工作，但更通用的解决方案将考虑以下场景：

<div id="top">    
    <div>
        <div>
           <h3 id="first">First</h3>
           <p>Hi</p>
           <p>Hello</p>
        </div>
    </div>
    <div>
        <h3 id="second">Second</h3>
        <p>Bye</p>
        <p>Goodbye</p>
    </div>
</div>

更通用的解决方案是：

$.extend($.fn, {
    isBefore: function(sel, context) {
        // Get all element within the context.
        var all = $(context || document).find("*");
        return all.index(this[0]) < all.index($(sel));
    },

    isAfter: function(sel, context) {
        return !this.isBefore(sel, context);
    }
});

其中“上下文”是一个可选参数，仅限制jQuery 的搜索区域可提高性能。我没有执行任何测试，但“上下文”可能是不必要的，因为 $("*") 似乎执行速度很快。另请注意，如果任一元素不在上下文中，则 index() 将返回 -1。

$("#first").isBefore("#second");  
// Gives the same result as
$("#first").isBefore("#second", "#top");

当然，这一切都假设“之前”和“之后”是指它们在文档模型中的顺序。如果您担心它们在显示上的相对位置，您可能需要检查元素相对于文档的显示坐标，因为“相对”、“固定”和“绝对”CSS 位置使一切成为可能。

Answer 11

仅当元素处于同一级别时，接受的答案才有效。如果您想要定位第一个元素（无论级别如何），解决此问题的一种方法是：

1. 为具有相同值的每个元素设置一个临时属性
2. 使用 jquery 选择器来定位具有该属性值的第一个元素