Выберите все элементы между двумя p-элементами

Question

Я ищу хороший способ пометить / выделить все элементы между двумя выбранными элементами.

Представьте себе

<parent>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</parent>

Есть обработчик щелчка на родительском элементе.Теперь пользователь может выбрать два элемента p в этом списке, после чего все промежуточные элементы p должны быть активированы.

Я думаю о такой системе, как:

1. первый щелчок: отметка / запоминание первого элемента -> A
2. второй щелчок: отметка / запоминание второго элемента -> B
3. определить, находится ли A перед B
4. , выполнить A.nextUntil (B) (если B не перед A)

Понятия не имеюкак сделать 3, ожидать приближения методом грубой силы (итерация в обоих направлениях и посмотреть, есть ли она там)

• Знает ли внутри себя, какой элемент стоит перед другим?
• Есть какие-нибудь более приятные идеи?

О моей ситуации: родитель может содержать несколько тысяч p.

Спасибо за вашу помощь / идеи!

Рето

Answer 1

Чтобы определить, какой элемент на первом месте, вы можете просто сделать:

$(a).index() < $(b).index()

Или чуть более быстрый подход:

$(a).prevAll().length < $(b).prevAll().length

---

Обратите внимание, что оба эти подхода будут толькоработать правильно, если a и b имеют одного и того же родителя.

---

О моей ситуации: родитель может содержать несколько тысяч p.

Как<p> добавлено?Возможно, вы могли бы дать каждому из них идентификатор, соответствующий их позиции (например, p1, p2 ...) - это определенно избавит вас от необходимости определять их позиции, используя вышеуказанные подходы.

Answer 2

эй, Рето, вот решение, которое я приготовил в jquery, надеюсь, оно поможет:

 <div id="test">
          <p>abc</p>
          <p>def</p>
          <p>ghi</p>
          <p>jkl</p>
        </div>

    <script>
    var a = $('#test').find('>p');
    var cli = [], range;
    $('#test').delegate("p",'click', function(event){
            if (cli.length < 2){//if there are less than 2 clicks in the queue
              cli.push(a.index(event.target));
            }
            else{//reset queue and recall the function
                cli = [];
                arguments.callee(event);
            }

            if (cli.length == 2){//if there are 2 clicks
             //filter from the initial selection only the elements between the two clicks
             range = a.filter(":lt("+cli[1]+"):gt("+cli[0]+")");
             if (cli[0]<cli[1]) {//aply some style to highlight and then revert
              range.css({color:'red'});
              setTimeout(function(){range.css({color:'black'})}, 1000);
          }
            }
    });
    </script>

Answer 3

Существует метод compareDocumentPosition, определенный на уровне DOM 3 для сравнения положения двух узлов DOM.

Вы бы использовали его как:

firstPara.compareDocumentPosition(otherPara);

Если возвращаемое значение равно 2 или Node.DOCUMENT_POSITION_PRECEDING, то firstPara предшествует otherPara.

Для этого есть также jQuery-плагин .

Мне нравится подход @ J-P по добавлению некоторого идентификатора, чтобы быстро определять их положение, не глядя на другие элементы. Атрибуты данных HTML5 также позволяют хранить это значение.

<parent>
  <p data-pos="1">..</p>
  <p data-pos="2">..</p>
  ..
</parent>

Доступ как $(e).attr('data-pos')