jQuery - 僅切換下一個元素

我想用jQuery切換下一個元素（而不是其他元素）：我將用示例來解釋自己。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>

我想點擊標題1.1和show（切換）ALL有字幕1和字幕2（第一個「強P」之間等等應有盡有之間和第二個「強大的p」）;簡而言之：我只想切換引用該標題的文章。

我試圖寫這個劇本：

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

但切換在同一時間所有的「正常」的段落;這裏是fiddle。
我相信我需要在下一個（）選擇，但我不使用正確的方式，就像我嘗試這樣做：

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

，但它不工作要麼。

我想解決它，而不必編輯HTML標記。

來源

2016-11-09 Stefano De Rosso

更可能https://api.jquery.com/nextUntil/ – mplungjan

如果你能控制你可以簡單地讓內容的標籤，標題一個子女的HTML，然後它會很容易切換到他們的父母。 – GillesC

謝謝，但問題正是我無法控制HTML。 –

如果你不能更新你的標記，那麼應用這個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/

來源

2016-11-09 15:22:06

問題是我無法重寫標記。 –

答案用小提琴鏈接更新！ –

謝謝！而已。 –

你的意思呢？

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

來源

2016-11-09 15:25:13 mplungjan

jQuery - 僅切換下一個元素

回答

相關問題