草庐IT

jquery - 找到下一个匹配 sibling 的高效、简洁的方法？

coder 2023-07-06 原文

坚持使用官方 jQuery API，除了使用 nextAll 和 :first 伪类？

当我说官方 API 时，我的意思是不破解内部结构，直接进入 Sizzle，在混合中添加插件等。(如果我最终不得不这样做，那就这样吧，但这不是这个问题是。)

例如，给定这个结构:

<div>One</div>
<div class='foo'>Two</div>
<div>Three</div>
<div class='foo'>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div class='foo'>Eight</div>

如果我在 this 中有一个 div(可能在一个 click 处理程序中，随便什么)并且想找到下一个匹配的同级 div选择器“div.foo”，我可以这样做:

var nextFoo = $(this).nextAll("div.foo:first");

...它有效(例如，如果我以“五”开头，它会跳过“六”和“七”并为我找到“八”)，但它很笨重，如果我想匹配第一个几个选择器中的任何一个，它都会变得笨拙得多。 (当然，它比原始 DOM 循环要简洁很多...)

我基本上想要:

var nextFoo = $(this).nextMatching("div.foo");

...其中 nextMatching 可以接受所有选择器。我总是对 next(selector) 没有这样做感到惊讶，但它没有，而且文档清楚地说明了它的作用，所以......

我总是可以编写并添加它，尽管如果我这样做并坚持使用已发布的 API，事情会变得非常低效。例如，一个简单的 next 循环:

jQuery.fn.nextMatching = function(selector) {
    var match;

    match = this.next();
    while (match.length > 0 && !match.is(selector)) {
        match = match.next();
    }
    return match;
};

...是markedly slower比 nextAll("selector:first")。这并不奇怪，nextAll 可以将整个事情交给 Sizzle，并且 Sizzle 已经过彻底优化。上面的朴素循环创建并丢弃各种临时对象，并且每次都必须重新解析选择器，它很慢也就不足为奇了。

当然，我不能只在末尾添加一个:first:

jQuery.fn.nextMatching = function(selector) {
    return this.nextAll(selector + ":first"); // <== WRONG
};

...因为虽然这适用于像“div.foo”这样的简单选择器，但它会因我谈到的“任何几个”选项而失败，比如“div.foo, div.bar”。

编辑:抱歉，应该说:最后，我可以只使用 .nextAll() 然后使用 .first()结果，但是 jQuery 将不得不访问所有 sibling 才能找到第一个。我希望它在匹配时停止，而不是遍历整个列表，这样它就可以丢弃除第一个以外的所有结果。 (虽然它似乎发生得真的很快；请参阅前面链接的 speed comparison 中的最后一个测试用例。)

提前致谢。

最佳答案

你可以传递一个 multiple selector至 .nextAll()并使用 .first()结果，像这样:

var nextFoo = $(this).nextAll("div.foo, div.something, div.else").first();

编辑: 只是为了比较，这里将其添加到测试套件中:http://jsperf.com/jquery-next-loop-vs-nextall-first/2这种方法要快得多，因为它是在可能的情况下(每个当前浏览器)将 .nextAll() 选择器交给 native 代码并只获取第一个结果集的简单组合...... 方式比您可以用纯 JavaScript 执行的任何循环都快。

关于jquery - 找到下一个匹配 sibling 的高效、简洁的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4933236/

简洁siblingcodedivfirstjqueryjquery-selectors

有关jquery - 找到下一个匹配 sibling 的高效、简洁的方法？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  6. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  7. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  8. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  9. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  10. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

随机推荐