jquery在</p> <div> </div>中选择多个<p>

时间:2011-03-09 05:47:07

标签: javascript jquery html jquery-selectors css-selectors

HTML:

<div id='example'>
  <p> First paragraph</p>
  <p> Second paragraph</p>
  <p> Third paragraph</p>
</div>

使用JQuery的Javascript: var paragraphs = $('div#examples p');

这将返回HTMLParagraphElement对象的数组。但是,我希望返回Jquery对象。 (所以我可以使用例如:

for(i=0;i<paragraphs.length;i++)
{
   paragraph[i].hide();
}

有没有办法轻松做到这一点?谢谢。

6 个答案:

答案 0 :(得分:9)

示例:

$('#examples p').hide();

div不是必需的

答案 1 :(得分:3)

您仍然可以使用您使用的选择器查询。即:

var paragraphs = $('div#examples p');
 paragraphs.hide();

 $('div#examples p').hide();

答案 2 :(得分:3)

这是查询当前问题的dom的最高效方式:

$('#examples).find('p').hide();

这是一些按键,但选择的速度比其他人给出的例子要快得多。原因是它首先遍历所有div,然后找到那些可能具有给定id的那些div,然后遍历以找到它们匹配的p标签。

在我的解决方案中,它只找到#examples,然后遍历到它的p标签。

答案 3 :(得分:2)

感谢大家的投入。迭代div p数组是必要的(如果不清楚则很抱歉),所以做$('div#example p').hide();不是一个合适的解决方案。我最终做了以下事情:

var arr = $('div#example p');

for(i=0;i<arr.length;i++)
{
  $(arr[i]).hide();
}

希望这对未来的人有用:)

答案 4 :(得分:1)

试试这个......

$('div#examples p').hide();

答案 5 :(得分:0)

从你问题的外观来看,答案就是如其他人所说:

$('div#examples p').hide();

但是对于必须遍历从jQuery查询返回的每个对象的情况,您应该使用以下语法:

$('div#examples p').each(function(){
    $(this).hide();
});

但请记住,如果它像hide一样简单,那么只需使用第一个例子。第二个示例是应用函数特定于每个对象的时间。下一个示例是将所有返回对象的高度加倍,这与第一个示例的方式不同:

$('div#examples p').each(function(){
    var h = $(this).height();
    $(this).height(h * 2);
});