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

我有三个班，都是同一班的。不同之处在于他们的风格。在我的例子中，a希望使用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;">

但是它给了我所有三个div，我只想要第三个，它的z-index=1052。我怎样才能选择那个呢。JQuery中是否有方法通过属性选择元素。

您可以使用以下方法：

$('.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable:eq(2)')

---

按DOM位置或z-index选择对话框是没有意义的——后者会随着对话框的移动或重新标记而频繁变化，并且这两个值的行为方式取决于jQuery UI版本（见下文）

在创建对话框时，找到其他方法标记您感兴趣的对话框（例如，添加特定ID或唯一类），然后选择该选项

例如，查看您提供的（不完整的）HTML，我可以看到前两个内容div具有id

#divProfile

和

#divChangePassword

。第三个content div没有ID，但似乎有一个额外的类

dialog

$('.dialog').closest('.ui-dialog')

或添加ID并使用：

$('#divWotIWant').closest('.ui-dialog')

---

最初，jqueryui对话框使用z-index进行堆叠。在jQueryUI1.10.x中，它们改为使用常量（auto？）z-index，然后依赖DOM顺序来控制堆叠，因为当具有相同z-index的多个元素重叠时，总是DOM顺序中的最后一个元素出现在最上面

---

然而，开发人员发现，将对话框移出DOM并重新插入会导致诸如Flash player之类的问题，如果它们嵌入到对话框中（导致播放器在您单击对话框时重置），因此他们恢复使用z索引。

如果您知道要选择哪个元素，请尝试以下操作：

$('[aria-labelledby=ui-dialog-title-4]')

---

您也可以使用第n个子项

$('.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable:nth-child(3)')

---

这会给你想要的任务。在警报中，您将获得第三个元素的参考，即z索引1052

$('.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable').each(function() {
    if($(this).css("z-index")=="1052"){
        alert($(this).html());
    }
});

试试这个- 它是基于z索引选择特定的div

---

希望它能有所帮助：）

这取决于第三个div与其他div的区别，为什么不简单地在第三个

div

中添加一个额外的类并引用它呢？@Andy这正是正确的方法。使用DOM position和/或z-index将非常脆弱。您可以为z-index添加类，例如top元素，底部元素。@ozil你没有回答你被问到的基本问题，这是在浪费人们的时间-这个特殊的div有什么特别之处？你以前用

.css（）

和

parseInt（）

获得

z-index

值的做法似乎正是作者想要的。我不知道你为什么要编辑掉它。@silvenon因为

$（这个）.css（'z-index'）

返回这些元素的

auto

，

auto

，

0

。在jQuery UI 1.10.x中，只要你点击任何其他对话框，DOM位置就会不一致-该版本的jQuery UI总是放在“最顶端”堆叠对话框在DOM中最后一个，但其他主要版本使用z-Index.One行代码，如$（'.ui dialog.ui widget.ui widget content.ui corner all.ui draggable'）.attr（'z-i‌​ndex'，'1052'）@ozil是的，您可以按属性选择元素。但是，您必须选择一个实际上有意义的属性，即一个固定的属性。最好是您自己添加的，出于性能原因，最好是类（或ID）而不是真正的HTML属性。$（“[aria labelledby=“ui-dialog-title-4”]”仍然选择所有三个div's@ozil我怀疑，它会选择所有将aria标记为“ui-dialog-title-4”的div。因此，考虑到上面的html代码，只有一个div标有“ui-dialog-title-4”属性。请在你那边再查一下。代码行在我这边运行正常。@ozil我再次使用更多筛选器检查了-“$”（“.ui dialog.ui widget.ui widget.ui widget content[aria labelledby=ui-dialog-title-4]”）。length”。这在我最后也很好，只返回了一个元素。我已经犯了这个错误

z-index

在现实中甚至不接近于

1052

。@Regent完全如我在回答中警告的那样。不能依赖zIndex作为任何特定值。请添加文档就绪。。我已经试过了。创建文档并检查。不经允许不要投反对票knowing@Alinatak将if条件替换为$（this）.attr（“attr name”）。包含（“必需文本”）@AkashSarawagi在fiddle的左半部分有“domready”只为我返回这三个

的

auto

、

auto

和

0

。所以，正如已经说过很多次的那样，你不能依赖

.css（“z-index”）

它适用于

z-index:1052

是的。唯一的问题是，它不适用于

z-index:1052

，但适用于

z-index:10520

它不是一个通用的解决方案，但它解决了用户问题，可以在这里使用。n个孩子有什么问题。。？

$('.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable').each(function() {
    if($(this).css("z-index")=="1052"){
        alert($(this).html());
    }
});

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