jQ identifying children with particular styling attributes

I am attempting to locate a child element that meets the following conditions: CSS visibility set to visible and CSS class assigned as foo

There will always be only one element that meets these criteria at any given time

var visibleBox = $('#parentEle').find().css( ??? );

Answer №1

Give this a shot:

 let visibleElements = $('#parentEle .foo').filter(function() {
   return ($(this).css('visibility') == 'visible');
});

let hiddenElements = $('#parentEle .foo').filter(function() {
       return ($(this).css('visibility') == 'hidden');
    });

Check out the DEMO

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

Divide a nested list into individual lists

I am working on a navigation menu with nested lists and I need to split the nested lists using jQuery while keeping the original headings intact. Can anyone help me achieve this? Below is the HTML code: <ul id="bigList"> <li><a href="#"& ...

Tips for utilizing CSS to position a semi-circle in the middle of an image

Can CSS create a half circle effect on any image? I want to achieve a half circle effect in an image using CSS. Is this possible or not? ...

How can you ensure that the Data Point Values are always displayed when using arrayToDataTable in the Google Charts API?

Just wanted to clarify that even though there is a similar question titled: Google Charts API: Always show the Data Point Values in Graph ...on this website, I am facing difficulties implementing its solution because my chart is using arrayToDataTable. ...

Enhance the Bootstrap parallelogram navbar menu by ensuring the menu items are perfectly aligned

I am working on customizing Bootstrap 5's navbar menu to create a rollover menu with parallelogram-shaped active menu items. I followed the approach recommended here, and while it works, the output is not as polished as I would like because the parall ...

Unable to locate the iframe in the test scenario

I encountered this particular test case: Select Frame id=coach_frame63454108.cf1 Wait Until Element Is Visible ${ap.gui.header.appname} Page Should Contain Element ${ap.gui.header.appname} Page Should Contain Element ${ap.gui.hea ...

Ways to align grid components at the center in MUI frameworks?

I am brand new to using MUI and currently experimenting with the grid functionality. <Grid className={classes.grid} container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> {data.data.map((item, index) => { ...

Is it possible to eliminate the input border within React-Bootstrap?

Struggling to remove the input borders of the Form.Control component in React-Bootstrap. Despite searching for answers, nothing has been able to solve this issue. I've attempted redefining the .css classes "input" and "form-control", trying to set th ...

Develop a dynamic progress bar using jQuery

I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet: *'width' : width - seems to be causing issues for me / ...

Implement a background image in the navigation bar links using CSS

Strange as it may seem, the image refuses to show up in the navbar. Adding borders or other styling makes it visible, but not the image itself. If I manually include the image using the <img/> tag in the HTML, it appears, but then the hover effect do ...

Displaying HTML elements conditionally in React depending on boolean values

Developing a component that limits the display of text to the first 40 characters, but can show the full description when a Chevron click event is triggered. The goal is to have the content expand in a similar fashion as it currently does with the Accord ...

Suggestions for creating a <div> that takes up the entire space when using the display property set to flex

html, body { height: 100%; margin: 0px; } .container { display: flex; width: 100%; height: 100%; background-color: yellow; } .box { flex-shrink: 0; } <div> <div class="container"> <div class="box"&g ...

Transform the prototype method into jQuery functionality

After finding this function online and testing it, I realized that it works fine on its own. However, the rest of my document consists of jQuery functions, so I would like to convert this one to jQuery as well. Additionally, I have encountered errors when ...

Is there a way to deactivate the <script> tag using CSS specifically for media queries?

When designing a website exclusively for desktop usage, I encountered the issue of it not being viewable on mobile devices. I attempted to address this problem by utilizing the code below: script { display: none; pointer-events: none; } Unfortunat ...

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

Some devices experiencing website update issues while others are successful

My website is functioning properly on my laptop and phone, but not on my school iPad (managed by the district). I have already cleared the cache, but the site does not update. It was working fine earlier, and I need to present it next Monday. Please help a ...

Initiating the accordion feature requires two clicks and triggers an rotation of the icon

I managed to integrate some code I discovered for a FAQ accordion on my website. I am struggling with getting the title to expand with just 1 click instead of 2. Additionally, I would like the icon to rotate when expanding/collapsing, not just on hover. Be ...

Similar to Jquery ajax, Titanium also offers a powerful tool

Currently, I have been making an API call using Titanium in the following way: var url = "http://www.appcelerator.com"; var client = Ti.Network.createHTTPClient({ // callback when data is received onload : function(e) { Ti.API.info("Re ...

Is there a way to utilize jquery to click a submit button within a concealed form?

In the current setup, there are 25 products displayed on a single page. Each product contains a form that needs to be dragged to the mini cart located on the right side. The challenge lies in identifying the form ID of the product that is being dragged. T ...

Problem with aligning an image horizontally within a DIV

Can anyone help me align the picture of the planet horizontally in the middle of the DIV section "about us" on my website? I've tried using text-align:center; in the CSS but it doesn't seem to work. Any suggestions would be appreciated. Thank you ...

What method can I use to locate the double quote option within an HTML select element using jQuery?

Here is an example of the select: <select id="id0" name="name0"> <option value='30" size'> 30" size </option> </select> The select contains double quotes. I am trying ...