Question

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

这是HTML：

row_number

我想点击TITLE 1.1并显示（切换）TITLE 1和TITLE 2之间的所有内容（所以第一个＆＃34;强p＆＃34;和第二个＆＃34之间的所有内容;强大的p＆＃34;）;用几句话说：我只想切换引用该标题的文章。

我试图写这个脚本：

select id,risk,origin,strength,
case when rnum=1 then strength end strength_sol
from (select t.*,
      row_number() over(partition by id 
                        order by case when risk=1 and origin =1 then 1 
                                      when risk=1 and origin =0 then 2 
                                 else 3 end) rnum
      from t
      ) x

但它切换了所有正常的＆＃34;段落同时;这里是fiddle 我相信我需要next（）选择器，但我没有以正确的方式使用它，就像我试过的那样：

<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>

但它也没有用。

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

Answer 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/

Answer 2

你是说这个吗？

＆＃13;

None

＆＃13;

$(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);
    }
  });
});

＆＃13;

jQuery - 仅切换下一个元素

2 个答案: