javascript - 在 jQuery.find() 中跳过选择器的递归？

Question

TL;DR:如何获得类似 find() 的操作，但会阻止某个选择器的遍历(不是句号，只是跳过)？

答案:$(Any).find(Selector).not( $(Any).find(Mask).find(Selector) )

There were many truly great answers, I wish I could some how distribute the bounty points more, maybe I should make some 50 pt bounties in response to some of these ;p I choose Karl-André Gagnon's because this answer managed to make findExclude unrequired in one, slightly long, line. While this uses three find calls and a heavy not filter, in most situations jQuery can use very fast implementation that skips traversal for most find()s.

Especially good answers are listed below:

falsarella: Good improvement on my solution, findExclude(), best in many situatoins

Zbyszek: A filter-based solution similar to falsarella's, also good on efficiency

Justin: A completely different, but manageable and functional solution to the underlaying issues

Each of these have their own unique merits and and are deserving of some mention.

我需要完全下降到一个元素并比较选择器，将所有匹配的选择器作为数组返回，但在遇到另一个选择器时跳过下降到树中。

编辑:用我网站上的一些代码示例替换原始代码示例

这是一个消息论坛，它可能有嵌套在任何消息中的回复消息组。
但是请注意，我们不能使用消息或内容类，因为该脚本还用于论坛之外的其他组件。只有InterfaceGroup , Interface和 controls类可能有用 - 最好只是接口(interface)和控件。

Interact with the code and see it in JS Fiddle, thanks Dave A, here在查看 JavaScript 控制台时单击按钮，可以看到控件类被绑定(bind)到每一层 .Interface 嵌套的额外时间。

Visual A，论坛布局结构:

    <li class="InterfaceGroup">
        <ul class="Interface Message" data-role="MessagePost" >
            <li class="instance"> ... condensed ... </li>
            <li class="InterfaceGroup"> ... condensed ...</li>
        </ul>
        <ul class="Interface Message" data-role="MessagePost" >
            <li class="instance"> ... condensed ... </li>
        </ul>
        <ul class="Interface Message" data-role="MessagePost" >
            <li class="instance"> ... condensed ... </li>
            <li class="InterfaceGroup"> ... condensed ...</li>
        </ul>

    </li>

每个 <li class="InterfaceGroup"> 的内部可能有相同结构的任意数量的重复(每个组都是一个消息线程)和/或更深的嵌套，例如..

    <li class="InterfaceGroup">

        <ul class="Interface Message" data-role="MessagePost" >
            <li class="instance"> ... condensed ... </li>
            <li class="InterfaceGroup">

                <ul class="Interface Message" data-role="MessagePost" >
                    <li class="instance"> ... condensed ... </li>
                    <li class="InterfaceGroup"> ... condensed ...</li>
                </ul>
            </li>
        </ul>
    </li>

每个 <li class="instance"> ... </li> 的内部有另一个团队决定的任意位置class="controls"可能会出现并且应该绑定(bind)一个事件监听器。尽管这些包含消息，但其他组件会任意构造它们的标记，但将始终具有 .controls .Interface 内部，它们被收集到 .InterfaceGroup 中.内部内容的复杂性降低版本(用于论坛帖子)在下面供引用。

Visual B，带有控件类的消息内容:

<ul class="Interface Message" data-role="MessagePost" >
    <li class="instance">
      <ul class="profile"> ...condensed, nothing clickable...</ul>
      <ul class="contents">
        <li class="heading"><h3>Hi there!</h3></li>
        <li class="body"><article>TEST Message here</article></li>
        <li class="vote controls">
          <button class="up" data-role="VoteUp" ><i class="fa fa-caret-up"> </i><br/>1</button>
          <button class="down" data-role="VoteDown" >0<br/><i class="fa fa-caret-down"> </i></button>
        </li>
        <li class="social controls">
          <button class="reply-btn" data-role="ReplyButton" >Reply</button>
        </li>
      </ul>
    </li>
    <li class="InterfaceGroup" >    <!-- NESTING OCCURRED -->
      <ul class="Interface Message" data-role="MessagePost" >
          <li class="instance">... condensed ... </li>
          <li class="InterfaceGroup" >... condensed ... </li>
      </ul>
   </li>
</ul>

我们只能绑定(bind)到 Interface 类中的控件，instance可能存在也可能不存在，但界面会存在。 事件冒泡到.controls元素并引用 .Interface包含它们。。

所以我正在尝试 $('.Interface').each( bind to any .controls not inside a deeper .Interface )

这是棘手的部分，因为

• .Interface .controls将选择相同的 .control在 .each() 中多次
• .not('.Interface .Interface .controls') 取消任何更深嵌套中的控件

我如何使用 jQuery.find() 或类似的 jQuery 方法来做到这一点？

我一直在考虑，或许，使用带 not 选择器的子项可以工作并且可以做与在引擎盖下查找相同的事情，但我不太确定它实际上是或不会导致可怕的表现。不过，有效地递归 .children 的答案是可以接受的。

更新:最初我尝试使用一个伪示例来简洁，但希望看到论坛结构将有助于澄清问题，因为它们是自然嵌套的结构。下面我也发布了部分javascript供引用，init函数的第二行是最重要的。

减少 JavaScript 部分:

var Interface=function()
{
    $elf=this;

    $elf.call=
    {
        init:function(Markup)
        {
            $elf.Interface = Markup;
            $elf.Controls = $(Markup).find('.controls').not('.Interface .controls');
            $elf.Controls.on('click mouseenter mouseleave', function(event){ $elf.call.events(event); });
            return $elf;
        },
        events:function(e)
        {
            var classlist = e.target.className.split(/\s+/), c=0, L=0;
            var role = $(e.target).data('role');

            if(e.type == 'click')
            {
                CurrentControl=$(e.target).closest('[data-role]')[0];
                role = $(CurrentControl).data('role');

                switch(role)
                {
                    case 'ReplyButton':console.log('Reply clicked'); break;
                    case 'VoteUp':console.log('Up vote clicked'); break;
                    case 'VoteDown':console.log('Down vote clicked'); break;
                    default: break;
                }
            }
        }
    }
};

$(document).ready( function()
{
    $('.Interface').each(function(instance, Markup)
    {
        Markup.Interface=new Interface().call.init(Markup);
    });
} );

Answer 1

如果你想排除你找到的元素，你可以使用 not 过滤器。例如，我为您介绍了排除元素的功能并使其更短:

$.fn.findExclude = function( Selector, Mask,){
    return this.find(Selector).not(this.find(Mask).find(Selector))
}

现在，老实说，我没有完全理解你想要什么。但是，当我查看您的功能时，我明白了您要做什么。

无论如何，看看这个 fiddle ，结果和你的一样:http://jsfiddle.net/KX65p/8/