javascript – jQuery – 关于“nextWhile”traversion的建议？

2019-05-27 06:21:14 阅读：252 来源： 互联网

标签：jquery javascript jquery-selectors traversal

jQuery目前有.next(过滤器)和.nextAll(过滤器),但我需要适合这些中间的东西 – 实际上,一个.nextWhile(过滤器)重复执行下一步,直到过滤器不再为真,然后停止(而不是而不是继续到最后).

为了证明这一点,以下是一些简化的HTML – (实际上,它是动态生成的,随机顺序/数据,更多列,正确的类名等).

<table>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>

        <tr class="x"><td>a <button>Show/Hide</button></td></tr>
            <tr class="x y"><td>a1</td></tr>
            <tr class="x y"><td>a2</td></tr>

        <tr class="z"><td>b</td></tr>

        <tr class="z"><td>c</td></tr>

        <tr class="x"><td>d <button>Show/Hide</button></td></tr>
            <tr class="x y"><td>d1</td></tr>
            <tr class="x y"><td>d2</td></tr>
            <tr class="x y"><td>d3</td></tr>

        <tr class="z"><td>e</td></tr>

        <tr class="x"><td>f</td></tr>

        <tr class="x"><td>g <button>Show/Hide</button></td></tr>
            <tr class="x y"><td>g1</td></tr>
            <tr class="x y"><td>g2</td></tr>

    </tbody>
</table>

对此,运行一些JavaScript：

<script type="text/javascript">
    var $j = jQuery.noConflict();

    $j().ready(init);

    function init()
    {
        $j('tr.y').hide();
        $j('tr.x button').click( toggleRelated );
    }

    function toggleRelated()
    {
        // Only toggles one row
        // $j(this).parents('tr').next('.y').toggle();

        // Toggles unrelated ones also
        $j(this).parents('tr').nextAll('.y').toggle();

        // Not currently a jQuery construct
        // $j(this).parents('tr').nextWhile('.y').toggle();
    }

</script>

有没有一种简单的方法来实现这个nextWhile结构？

理想情况下,这需要在不修改当前HTML的情况下实现.

解决方法:

在jQuery中,您可以使用nextUntil()方法和:not选择器创建nextWhile()等效项.简单地说,while(条件为真){do something}与说直到(条件为假){做某事}相同.

考虑这个技巧示例,您需要选择跟随第一个.parent的所有.child元素：

<ul id="test">
  <li class="parent"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="divider"></li>
  <li class="parent"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

以下代码大致相当于.nextWhile(“.child”)并选择三个.child元素：

$("#test .parent:first").nextUntil(":not(.child)");

标签：jquery,javascript,jquery-selectors,traversal
来源： https://codeday.me/bug/20190527/1160949.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – jQuery – 关于“nextWhile”traversion的建议？