Question

有没有办法从给定元素中选择所有元素到另一个给定元素？例如：

 <div>
    <div>
        <a name="break1"></a>
        <p> belongs to break 1</p>
        <div>
            <p> belongs to break 1</p>
        </div>
    </div>
    <p>belongs to break 1</p>
    <div>
        <a name="break2"></a>
        <p> belongs to break 2</p>
        <div>
            <p> belongs to break 2</p>
            <div>
                <p> belongs to break 2</p>
            </div>
        </div>
    </div>
</div>

我们需要以下内容：

$('[name*="break1"]').selectAllUntil('[name*="break2"]');

，结果应为：

<p> belongs to break 1</p>
<div>
    <p> belongs to break 1</p>
</div>
<p>belongs to break 1</p>

最重要的是：需要向下看每个元素的兄弟姐妹，直到选择器匹配的元素，如果我们没找到它，我们需要继续在父节点上搜索

这可能会产生误导，因为我们需要选择all直到下一个元素，即使父元素中存在下一个元素

Answer 1

假设html始终相同，您可以尝试使用prevAll()。

示例：

$('.break2').parent().prevAll().css('color', 'blue');

https://jsfiddle.net/kt10r6n5/1/

注意：

如果你在演示中使用类似于你的类，那么如果你有同一个类的多个实例，这可能会有问题。然后，您必须找到该类的最后一个实例。当然，这会更好地使用id。

<强>文档：

http://api.jquery.com/prevall/

Answer 2

我在plunker中创建了方法： https://plnkr.co/edit/XUNCkYMJz4TEekLdBrJM?p=preview

此脚本返回jquery对象，其中包含selector1和selector2之间的元素集合。

修改即可。好的，我现在进去了！它应该按预期工作。

重要 - 脚本正在选择父级别，因此依赖于html结构。

jQuery.fn.extend({
 selectAllUntil: function(selector) {

   var currentDiv=this.parent("div");
   var elements = $();//empty jquery collection


   while(currentDiv.length){


     if (currentDiv.find(selector).length){
         //if our element have inside selector then this is end
         return elements;

     }else{
         //no selector so add 
        elements= elements.add(currentDiv);
     }

     //next element
     currentDiv=currentDiv.next();

    }



  }});

//usage:
$(function(){

  var elements=$('[name*="break2"]').selectAllUntil('[name*="break4"]');
  elements.css("color","red");



});

jquery从元素到元素获取所有内容

2 个答案: