Choosing an element in JQuery based on the value of its style property

I have three divs with the same class but different styles. I need to select only the third one using 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;">

This is my current approach:

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

However, this selects all three divs. I only want the third one with a z-index of 1052. Is there a way in JQuery to select an element by its attribute?

javascriptjquerycss

Answer №1

To achieve this, simply utilize the :eq() method:

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

Answer №2

Choosing dialogs based on DOM position or z-index doesn't make much sense - the z-index can change often as dialogs are rearranged, and the behavior of both values differs depending on the version of jQuery UI

Instead, consider assigning a specific ID or unique class to the dialog you want to target when creating it, and then select based on that.

For instance, from the provided HTML snippet, the first two content divs have IDs #divProfile and #divChangePassword. The third content div doesn't have an ID but seems to have an additional class of dialog.

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

or give it an ID and use:

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

Initially, jQuery UI dialogs relied on z-index for stacking. In jQuery UI 1.10.x, they switched to using a constant (auto?) z-index and relied on DOM order for stacking control, since the last element in DOM order always appears on top when elements have the same z-index.

However, developers discovered that removing a dialog from the DOM and reinserting it caused problems with things like Flash player if embedded in a dialog (making the player reset whenever a dialog was clicked), so they reverted back to using z-indexes.

Answer №3

Another option is to utilize nth-child selector 

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

Answer №4

This code snippet can help you achieve the desired task. It extracts the reference of the third element with a z-index of 1052 and displays it in an alert message.

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

Answer №5

If you are aware of the element to choose, give this a shot:

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

Answer №6

Here is a helpful tip for selecting a specific div based on the z-index:

http://jsfiddle.net/6yzbwm6h/

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

I hope this information proves useful to you :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering ECONNREFUSED error when making requests to an external API in a NextJS application integrated with Auth

Currently, I have integrated Auth0 authentication into my NextJS application by following their documentation. Now, I am in the process of calling an external ExpressJS application using the guidelines provided here: https://github.com/auth0/nextjs-auth0/b ...

javascripttypescriptnext.jsauth0

Text box is not automatically filling up when selecting from dropdown menu

I am currently facing an issue with a dropdown box that offers three different selections. I want the Group ID associated with the selected group to automatically populate in the textbox below. How can I achieve this functionality? Whenever I make a selec ...

javascriptphphtmlsql-serverdrop-down-menu

jQuery animation that smoothly fades out from the left and fades in from the right

This survey is designed to assist individuals in determining where they should go with a specific type of ticket. Currently, everything is functioning smoothly, but I would like to add a sleek animation to each ul transition. Whenever a button is clicked ...

javascripthtmljquerycss

transforming JSON information within an angularJS framework into an array and displaying it visually with a C3 chart

Looking to create an x-y plot using AngularJS with a JSON data feed. The JSON data displays EQ magnitude VS time. How do I convert this data into an array format and plot it in a c3 chart? (similar to the one in this link ) Appreciate any assistance you c ...

javascriptangularjsjsonc3.js

Encountered an error while parsing a module in React: Unexpected token

After deciding to incorporate the npm package react-radio-buttons into my project, I encountered an error upon installation and implementation in my component: ./node_modules/react-radio-buttons/index.jsx 80:6 module parse failed: Unexpected token (80:6) ...

javascriptreactjsobjectnpmpackage

Issue with Jquery's .addClass and .removeClass functions

I'm having trouble implementing a dynamic menu on my webpage using jQuery. I've tried writing the code myself but it doesn't seem to be working as expected. The structure involves three classes: .dead, which sets display: none; in CSS, .hea ...

jqueryhtmlcsstwitter-bootstrap

Executing an AJAX request on Rails 3 without triggering a redirect by using a link/button

What is the most effective method for executing an ajax command using a link in Rails 3.1 with jQuery? Currently, I am attempting to use a link to trigger code from the "update_me" controller action. The line in views/products/new.html.erb looks like this ...

ajaxruby-on-rails-3model-view-controllerjquery

Nested state fails to display HTML content or activate controller initialization

I am trying to utilize ui-router's parent/child states with the code snippet below. Everything seems to be in order as there are no console errors, but for some reason the HTML content is not being rendered and the controller's init function is n ...

javascriptangularjsangular-ui-router

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

htmlcsscss-selectors

Issues arise when the condition fails to function correctly during the process of form

I am currently working on a question from my elder brother's question paper, but I am struggling to solve it. The task is to create a form with two text fields, a radio button, and a submit button. The text fields should be named "account number" and ...

javascriptjqueryhtmlformsvalidation

Modify the properties of an element based on another

Situation : I am facing a challenge where I need to adjust two components based on a click event. The function linked to the onclick event handleChange includes a prop 'text'. Each time the onclick event is triggered, I must modify the value of t ...

javascriptreactjsmaterial-uirenderconditional-operator

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

javascripthtmlreactjsgatsby

Use jQuery to switch out certain text with specified HTML elements

I am looking to use jQuery in order to dynamically wrap any text that matches a specific regular expression with a particular HTML tag. For instance: <div class="content"> <div class="spamcontainer"> Eggs and spam is better than ham and spam. ...

jqueryhtml

"Steps for implementing a multiselect feature with checkboxes, including the ability to check all and uncheck all, in a React application

After creating a custom component for selecting multiple options and adding a check all feature, the challenge arises when needing an uncheck option. Solution? Implementing an uncheck all feature alongside the select all functionality, but how to modify th ...

javascriptreactjsmaterial-uimulti-select

pick out particular values from an array

I have a question that may seem basic to some, but I'm curious about how to select specific elements from an array. In this case, I have an array with 100 elements: var cubes = [element1, element2, element3 ...] and I want to select elements 25-35. ...

javascripthtmlarrays

css background-size and image position not working

On my website, users/members can upload or link a custom image for the start page. This feature works well with modern browsers that support background-size in CSS. However, if the browser does not support css3 background-size, the image may not fill the e ...

htmlcss

Tips for employing 'live CSS' in Rails

As someone who is new to Ruby on Rails, I am currently facing a challenge. I want to extract data from specific fields in my database and utilize them for styling purposes. For instance, within my 'Student' database, there are height and width f ...

htmlcssruby-on-railsruby

Tapping on the invisible picture

I currently have a square image of a car with a transparent background. My goal is to make the car clickable so that when I click on it, it triggers an action. However, I also want the transparency around the car to allow clicks to go through and affect th ...

javascriptimageclickpngtransparency

Despite providing the correct token with Bearer, Vue 3 is still experiencing authorization issues

I am working on a project that involves Vue 3 with a Node Express back-end server and Firebase integration. On the backend server, I have implemented the following middleware: const getAuthToken = (req, _, next) => { if ( req.headers.authori ...

javascriptnode.jsexpressvue.jstoken

handling component interaction with react-redux store

Currently, I am in the process of developing my first significant project using react-redux. While trying to establish state mapping between components in react-redux, I seem to have missed a crucial step. Almost everything is functioning smoothly except ...

javascriptreactjsreact-routerreact-redux