Проверьте, находится ли элемент до или после другого элемента в 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 s, после первого h3 и перед вторым h3 с jQuery?

Я пытаюсь сделать что-то вроде этого:

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

Answer 1

Решение Rocket прекрасно работает, если sel является реальным селектором, но если вы передаете объект 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;
}

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

Я реализовал общую функцию 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 5

Вот скрипка

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

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

});

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. Установить временный атрибут для каждого элемента с одинаковым значением
2. Использовать селектор jqueryнайти первый элемент со значением этого атрибута

Answer 8

Предыдущие ответы работают нормально, ЕСЛИ рассматриваемые элементы - это братья и сестры (что они и есть в исходном вопросе), но более общее решение будет учитывать следующий сценарий:

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

Имея в виду ответ Ракеты, я предпочитаю использовать .index() подход, подобный следующему:

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

Он кажется более понятным для чтения / понимания и отлично работает при выборе строк.