Jquery 获取子元素问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery 获取子元素问题相关的知识,希望对你有一定的参考价值。

$('#pan > li ')
如果把id放到一个变量里,这里应该怎么写?
var id=‘#pan’
$(??????>li)

如果id是一个变量的话,把它放到引号外面用+号连接起来就行了,
$(id).children("span")
或者$(\'#\'+id).find(\'li\');

JQuery是继prototype之后又一个优秀的javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理html(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。
参考技术A 如果id是一个变量的话,把它放到引号外面用+号连接起来就行了,

$('#'+id+'>li') 但是这样的话不知道有没有问题,不行的话可以这样:

$('#'+id).find('li');本回答被提问者采纳

如何在 Jquery 中通过索引获取子元素?

【中文标题】如何在 Jquery 中通过索引获取子元素?【英文标题】:How to get child element by index in Jquery? 【发布时间】:2012-02-14 03:34:26 【问题描述】:
<div class="second">
    <div class="selector" id="selFirst"></div>
    <div class="selector" id="selSecond"></div>
    <div></div>
</div>

如何使用元素索引而不是 ID 获取#selFirst?

这个:

var $selFirst = $(".second:nth-child(1)");
console.log($selFirst);

正在返回:

jQuery(div.second)

【问题讨论】:

【参考方案1】:

如果你知道你感兴趣的子元素是第一个:

 $('.second').children().first();

或按索引查找:

 var index = 0
 $('.second').children().eq(index);

【讨论】:

注意:eq() 是 0-indexed,但 index() 是 1-indexed。 这个问题比较笼统。如何按索引选择。这不是关于如何选择第一个孩子。 @AlexanderVolkov 注意第二个例子,它使用了索引【参考方案2】:

选择第一个孩子有以下几种方式

1) $('.second div:first-child')
2) $('.second *:first-child')
3) $('div:first-child', '.second')
4) $('*:first-child', '.second')
5) $('.second div:nth-child(1)')
6) $('.second').children().first()
7) $('.second').children().eq(0)

【讨论】:

您提供的选择越多,获得的点赞就越多! 这个问题比较笼统。如何按索引选择。这不是关于如何选择第一个孩子。【参考方案3】:

您可以通过索引选择器获取第一个元素:

$('div.second div:eq(0)')

代码:http://jsfiddle.net/RX46D/

【讨论】:

索引选择器不好。改用方法,它们更快【参考方案4】:
$('.second').find('div:first')

【讨论】:

【参考方案5】:

nth-child 不是返回兄弟姐妹而不是孩子吗?

var $selFirst = $(".second:nth-child(1)");

将返回第一个具有“.second”类的元素。

var $selFirst = $(".selector:nth-child(1)");

应该给你类'.selector'的第一个兄弟

【讨论】:

【参考方案6】:

var node = document.getElementsByClassName("second")[0].firstElementChild

免责声明getElementsByClassNamefirstElementChild 的浏览器合规性不稳定。 DOM-shims 解决了这些问题。

【讨论】:

请记住,如果 OP 正在寻找第一个 DIV,如果 .second 和 #selFirst 之间有任何 HTML 元素,这将不起作用。 他在哪里说“第一个 DIV”。他在哪里说“.second 和#selFirst 之间会有元素”

以上是关于Jquery 获取子元素问题的主要内容,如果未能解决你的问题,请参考以下文章

jquery 获取子元素的限制jquery

jQuery 获取除子元素 X 之外的子元素的 HTML

jquery怎样获取一个元素下面相同子元素的个数?

jquery怎么在父元素事件中禁止子元素的事件?

jquery获取指定元素下的子元素

jquery获取指定元素下的子元素