jquery如何获取class元素集

jquery如何获取class元素集,第1张

太多了 不明白你想干什么 你是想处理多个class是吧 想怎么获取?用each方法就可以了

$("nav")each(function(index,item) {
    $(this)……//这个就是jquer循环获取的class对象 你可以用来处理你的逻辑
});

分为以下2种情况: 
1如果css写成行内样式,可以通过获取style属性的值来判断,示例如下: 
判断id为divid的div元素是否有font-size样式:

2如果css写成类样式,可以通过获取class属性的值来判断,示例如下: 
判断id为divid的div元素是否含有类样式divclass:

描述: 为每个匹配的元素添加指定的样式类名

$('div')addClass('className');//为所有div添加名为className的class1

removeClass 
描述: 移除集合中每个匹配元素上一个,多个或全部样式。

$('div')removeClass('className');//将所有div上名为className的class移除1

toggleClass 
描述: 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。

$('div')toggleClass('className');//如果div上有这个class就删除,没有就添加。

有一个Div,我想获取其ID或者Class值。
那么我可以先定位到这个DIV,然后采用attr方法来获取其值:
假如说:有一段Html代码:
[html] view plain copy
<div class="comment" id="22">
<div class="comment_detail" style="display: block; ">
<div class="comment_my"><textarea class="comment_text" style="height: 16px; "></textarea></div>
<div class="comment_text_bottom" style="display: none; ">
<div class="comment_emotion"><a href="javascript:void(0)" class="comment_emotion_button">表情</a>
<div class="comment_emotion_detail" style="display: none; ">
</div>
</div>
<div class="comment_publish"><input class="submit" type="submit" value="评论"></div>
</div>
</div>
<div class="comment_bar"><a href="javascript:void(0)" class="comment_click"></a></div>
</div>
如果我想从submit处定位,获取到comment处DIv的ID,那么我就可以这样办:
ID值为:
[javascript] view plain copy
$("submit")parent()parent()parent()parent()attr('id');
其值为:22;
CLASS值为:
[javascript] view plain copy
$("submit")parent()parent()parent()parent()attr('class')
其值为:comment;

jQuery的元素选择器可以根据class选择元素。例如,获取class='aaa'的DIV元素的代码为:$("divaaa")
。下面提供一个具体的示例,HTML结构如下:
<div
id='a'><div
class='aaa'></div></div>
<div
id='b'><div
class='aaa'></div></div>
<div
id='c'><div
class='aaa'></div></div>
1、获取id为b的div下的aaa类元素
$("divaaa")获取的是所有的aaa类,如果限定为b元素下的aaa类,可以配合后代选择器使用,代码为:$("div#b
divaaa")

2、获取id为a或者c的div下的aaa类元素
如果需要获取多个不同类型的对象,可以使用逗号(,)分隔,所以相应代码为:
$("#a
aaa,
#c
aaa")


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/10404426.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-08
下一篇 2023-05-08

发表评论

登录后才能评论

评论列表(0条)

保存