Question

基于以下HTML： -

<div id="content">
     <h1>Main title</h1>
     <h2>Section title</h2>
     <p>Some content...</p>
     <h2>Section title</h2>
     <p>More content...</p>
</div>

在jQuery中，我如何选择和显示使用变量，只显示<h2>元素之后的<h1>元素？

我尝试了以下内容，但仍显示所有元素： -

<script type="text/javascript">
     $(document).ready(function(){
          var headers =$('h1 + h2');
          headers.show();
     });
</script>

Answer 1

你可以做一些像::

这样的事情

$('h1, h2').hide();

$(document).ready(function(){
     var headers =$('h1,h2');
     headers.show();
});

为了更好的参考goto：http://jsfiddle.net/rjha999/28mdT/

Answer 2

显示使用变量，只显示紧随其后的元素元素？

您的选择器Next Adjacent Selector (“prev + next”)正确显示相邻的h1和h2，但您必须先隐藏h1和h2

<强> Live Demo

$('h1, h2').hide();

$(document).ready(function(){
     var headers =$('h1 + h2');
     headers.show();
});

说明：选择匹配＆＃34; next＆＃34;的所有下一个元素那是紧接着是兄弟姐妹＆＃34; prev＆＃34;，jQuery Docs

Answer 3

$('h1, h2').next().show()

选择下一个sibiling然后显示它们。

当然，如果他们不开始隐藏，他们每次都可以看到。

ready()中的代码意味着您每次准备页面时都会显示这些元素，因此您需要将所有逻辑包装在条件语句中。

Answer 4

可能是您希望逐个显示：

$('#content').children().hide(); // hide them first here
$('#content').contents().each(function (index) {
   $(this).delay(index * 300).fadeIn();
});

使用jQuery变量来显示和隐藏内容

4 个答案:

Demo