我有三个div'都有同一个班级。不同的是他们的风格。在我的情况下,想要使用JQuery仅选择第三个。
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-divProfile" style="display: none; z-index: 1000; outline: 0px;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-divProfile">Edit Profile</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="divProfile" class="ui-dialog-content ui-widget-content"></div></div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-divChangePassword" style="display: none; z-index: 1000; outline: 0px;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-divChangePassword">Change Password</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="divChangePassword" class="ui-dialog-content ui-widget-content"></div></div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-4" style="display: block; z-index: 1052; outline: 0px; height: auto; width: 900px; top: 154.5px; left: 226.5px; opacity: 0.0784;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-4"> </span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div class="dialog ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0" style="width: auto; min-height: 83.8400001525879px; height: auto;">
我这样做
$('.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable')
但它给了我所有三个div#。我只想要第三个具有z-index = 1052的div。我该如何选择那个。 JQuery中是否有一种方法可以按属性选择元素。
答案 0 :(得分:0)
您可以使用:eq():
$('.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable:eq(2)')
答案 1 :(得分:0)
通过DOM位置或z-index选择对话框是没有意义的 - 后者会随着对话框的移动或重新打包而频繁变化,两种值的行为方式因jQuery UI版本而异(见下文)< / p>
在创建对象时,找一些标记您感兴趣的对话框的方法(例如,添加特定ID或唯一类),然后选择该对话框。
例如,查看您提供的(不完整)HTML,我可以看到前两个内容div具有ID #divProfile
和#divChangePassword
。第三个内容div没有ID,但似乎有一个额外的dialog
类。
$('.dialog').closest('.ui-dialog')
或添加ID并使用:
$('#divWotIWant').closest('.ui-dialog')
最初,jQuery UI对话框使用z-index进行堆叠。在jQuery UI 1.10.x中,他们改为使用常量(自动?)z-index,然后依靠DOM顺序来控制堆叠,因为当具有相同z-index的多个元素重叠时,它始终是DOM顺序中最后一个出现在最顶层的元素
然而,开发人员发现将对话框从DOM中移出并重新插入它会导致Flash播放器等问题,如果它们嵌入到对话框中(导致播放器在您单击对话框时重置),那么他们又会回复使用z-indexes。
答案 2 :(得分:-1)
如果您知道要选择哪个元素,请尝试此操作:
$('[aria-labelledby=ui-dialog-title-4]')
答案 3 :(得分:-1)
您也可以使用 nth-child
$('.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable:nth-child(3)')
答案 4 :(得分:-1)
这将为您提供所需的任务。在警告中,您将获得z-index 1052的第三个元素的引用。
$('.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable').each(function() {
if($(this).css("z-index")=="1052"){
alert($(this).html());
}
});
答案 5 :(得分:-1)
试试这个 - 它是根据z-index选择特定的div。
$("* [style*='z-index: 1052']").filter(function () { alert($(this).html()) });
希望有所帮助:)