选择两个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，期望采用蛮力方法（在两个方向反复迭代，看看是否存在）

• dom内部是否知道哪个元素先于另一个元素？
• 有更好的主意吗？

关于我的情况：父母可能包含几千个p。

感谢您的帮助/想法！

雷托

Answer 1

要确定首先出现哪个元素，您可以执行以下操作：

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

或者，一种更快的方法：

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

---

请注意，只有当a和b具有相同的父对象时，这两种方法才可以正常工作。

---

关于我的情况：父母可能包含几千个p。

如何添加<p> ？ 也许您可以给他们每个人一个与他们的位置相对应的ID（例如p1 ， p2 ...）-这肯定可以使您不必使用上述方法来确定他们的位置。

Answer 2

在DOM级别3中定义了compareDocumentPosition方法，用于比较两个DOM节点的位置。

您可以将其用作：

firstPara.compareDocumentPosition(otherPara);

如果返回值为2或Node.DOCUMENT_POSITION_PRECEDING ，则firstPara在otherPara之前。

还有一个jQuery插件 。

我喜欢@JP添加一些标识符以快速确定其位置而无需查看任何其他元素的方法。 HTML5的数据属性也是用于存储此值的选项。

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

作为$(e).attr('data-pos')

Answer 3

嘿Reto这是我在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>