jQuery - 仅切换下一个元素
jQuery - toggle only next element
我只想用 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> </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 之间的所有内容(所以第一个 "strong p" 和第二个 "strong p" 之间的所有内容);简而言之:我只想切换引用该标题的文章。
我试过写这个脚本:
$(document).ready(function(){
$("#post-60 p strong").click(function(){
$("p:not(:has(strong))").toggle(500);
});
});
但它会同时切换所有 "normal" 段落;这是 fiddle.
我相信我需要 next() 选择器,但我没有以正确的方式使用它,就像我试过的那样:
$(document).ready(function(){
$("#post-60 p strong").click(function(){
$("p:not(:has(strong))").next().toggle(500);
});
});
但它也不起作用。
我想在不编辑 HTML 标记的情况下解决它。
如果您无法更新标记,请应用此 JS。
$(document).ready(function(){
$("#post-60 p strong").click(function(){
$(this).parent().next('p').nextUntil( "p:has(strong)").toggle(500);
});
});
工作fiddlehttps://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> </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);
});
});
查看更新后的 fiddle https://jsfiddle.net/xpxhkh1r/1/
你是这个意思吗?
$(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> </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>
我只想用 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> </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 之间的所有内容(所以第一个 "strong p" 和第二个 "strong p" 之间的所有内容);简而言之:我只想切换引用该标题的文章。
我试过写这个脚本:
$(document).ready(function(){
$("#post-60 p strong").click(function(){
$("p:not(:has(strong))").toggle(500);
});
});
但它会同时切换所有 "normal" 段落;这是 fiddle.
我相信我需要 next() 选择器,但我没有以正确的方式使用它,就像我试过的那样:
$(document).ready(function(){
$("#post-60 p strong").click(function(){
$("p:not(:has(strong))").next().toggle(500);
});
});
但它也不起作用。
我想在不编辑 HTML 标记的情况下解决它。
如果您无法更新标记,请应用此 JS。
$(document).ready(function(){
$("#post-60 p strong").click(function(){
$(this).parent().next('p').nextUntil( "p:has(strong)").toggle(500);
});
});
工作fiddlehttps://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> </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);
});
});
查看更新后的 fiddle https://jsfiddle.net/xpxhkh1r/1/
你是这个意思吗?
$(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> </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>