通过样式属性值在JQuery中选择元素

时间:2014-10-09 10:25:31

标签: javascript jquery css

我有三个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">&nbsp;</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中是否有一种方法可以按属性选择元素。

6 个答案:

答案 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。

http://jsfiddle.net/6yzbwm6h/

$("* [style*='z-index: 1052']").filter(function () { alert($(this).html()) });

希望有所帮助:)