jQuery - 仅切换下一个元素

Posted 2023-02-25

【中文标题】jQuery - 仅切换下一个元素

【英文标题】：jQuery - toggle only next element

【发布时间】：2016-11-09 15:10:35

【问题描述】：

我想用 jQuery 只切换下一个元素（而不是其他元素）：我会用例子来解释自己。

这是 html：

<article id="post-60" class="post-60 page type-page status-publish hentry">
    <header class="entry-header">
        <h1 class="entry-title">Pagine Critiche</h1>
    </header><!-- .entry-header -->

    <div class="entry-content">
        <p><strong>TITLE 1.1</strong></p>
        <p><strong>TITLE 1.2</strong></p>
        <p><em>Writer writes:</em></p>
        <p>Article #1</p>
        <p>&nbsp;</p>

        <p><strong>TITLE 2.1</strong></p>
        <p><strong>TITLE 2.2</strong></p>
        <p><em>Writer writes:</em></p>
        <p>Article #2.1</p>
        <p>Article #2.2</p>
        <p>Article #2.3</p>
    </div>
</article>

我想点击 TITLE 1.1 并显示（切换）TITLE 1 和 TITLE 2 之间的所有内容（因此第一个“强 p”和第二个“强 p”之间的所有内容）；简而言之：我只想切换引用该标题的文章。

我试过写这个脚本：

$(document).ready(function()
    $("#post-60 p strong").click(function()
        $("p:not(:has(strong))").toggle(500);
    );
);

但它会同时切换所有“正常”段落；这是fiddle。 我相信我需要 next() 选择器，但我没有以正确的方式使用它，就像我尝试过的那样：

$(document).ready(function()
    $("#post-60 p strong").click(function()
        $("p:not(:has(strong))").next().toggle(500);
    );
);

但它也不起作用。

我想在不编辑 HTML 标记的情况下解决它。

【问题讨论】：

更有可能api.jquery.com/nextUntil

如果您可以控制 HTML，您可以简单地将内容标签作为标题一的子项，然后将它们相对于其父项进行切换会非常容易。

谢谢，但问题正是我无法控制 HTML。

【参考方案1】：

如果你不能更新你的标记然后应用这个 JS。

$(document).ready(function()
    $("#post-60 p strong").click(function()
        $(this).parent().next('p').nextUntil( "p:has(strong)").toggle(500);
    );
);

工作小提琴https://jsfiddle.net/xpxhkh1r/3/

如果你可以重写你的标记会更简单。这是一个例子。

<div class="entry-content">
    <p><strong>TITLE 1.1</strong></p>
    <div class="item">
        <p><strong>TITLE 1.2</strong></p>
        <p><em>Writer writes:</em></p>
        <p>Article #1</p>
        <p>&nbsp;</p>
    </div>

    <p><strong>TITLE 2.1</strong></p>
    <div class="item">
        <p><strong>TITLE 2.2</strong></p>
        <p><em>Writer writes:</em></p>
        <p>Article #2.1</p>
        <p>Article #2.2</p>
        <p>Article #2.3</p>
    </div>
</div>

JS 应该是这样的

$(document).ready(function()
    $("#post-60 p strong").click(function()
        $(this).parent().next('.item').toggle(500);
    );
);

查看更新的小提琴https://jsfiddle.net/xpxhkh1r/1/

【参考方案2】：

你是这个意思吗？

$(function() 
  $("#post-60 p>strong").click(function() 
    var $thisP = $(this).closest("p");
    if ($thisP.next().has("strong").length > 0)  // next P has strong, we are on x.1
      $thisP.next().toggle(500);
      $thisP.next().nextUntil("p:has(strong)").toggle(500);
     else  // we are on x.2
      $thisP.nextUntil("p:has(strong)").toggle(500);
    
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<article id="post-60" class="post-60 page type-page status-publish hentry">
  <header class="entry-header">
    <h1 class="entry-title">Pagine Critiche</h1>
  </header>
  <!-- .entry-header -->

  <div class="entry-content">
    <p><strong>TITLE 1.1</strong>
    </p>
    <p><strong>TITLE 1.2</strong>
    </p>
    <p><em>Writer writes:</em>
    </p>
    <p>Article #1</p>
    <p>&nbsp;</p>

    <p><strong>TITLE 2.1</strong>
    </p>
    <p><strong>TITLE 2.2</strong>
    </p>
    <p><em>Writer writes:</em>
    </p>
    <p>Article #2.1</p>
    <p>Article #2.2</p>
    <p>Article #2.3</p>
  </div>
</article>