The function JQUERY .filter().text() may not yield accurate results when used on hidden elements

I have a group of hidden elements with the class name "asd" and I want to select only one using jQuery, but the .text() method doesn't seem to work even when an object is returned by the filter method. Other jQuery methods also do not yield the desired result. Here's my code:

<script>
$(document).ready(function(){
    alert($("#vetrina > :hidden").filter(".asd").text());
});
</script> 

HTML:

<div id="vetrina">
    <div class="blocco" class="1">
       The text I don't need
    </div>
    <div class="blocco-inv" class="asd">
        THE TEXT I WANT TO RETRIEVE
    </div>
    <div class="blocco-inv" class="3">
        The text I don't need (still hidden)
    </div>
</div>

CSS:

<style>
#vetrina{
    width: 100%;
    background-color: none;
    display: table-row;
}
.blocco{
    display: table-cell;
    margin: 15px;
    border: 2px solid lightgrey;
    position: absolute;
    display: inline;
}
.blocco-inv{
    display: table-cell;
    margin: 15px;
    border: 2px solid lightgrey;
    position: absolute;
    display: none;
}
</style>

Answer №1

$(document).ready(function(){
    alert($(".asd").text());
});
#vetrina{
    width: 100%;
    background-color: none;
    display: table-row;
}
.blocco{
    display: table-cell;
    margin: 15px;
    border: 2px solid lightgrey;
    position: absolute;
    display: inline;
}
.blocco-inv{
    display: table-cell;
    margin: 15px;
    border: 2px solid lightgrey;
    position: absolute;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vetrina">
    <div class="blocco 1">
       the text I do not wish to use
    </div>
    <div class="blocco-inv asd">
        THE TEXT I WANT TO RETRIEVE
    </div>
    <div class="blocco-inv 1">
        the text I do not want (still hidden)
    </div>
</div>

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

Necessary within a JavaScript Class

As a newcomer to using classes in JavaScript, I've been exploring the best practices and wondering about how 'requires' work when used within a class. For example, let's say I want to craft an IoT Connection class for connecting to the ...

Element receives scrollbar upon reaching 100% width

I am intrigued as to why the overflow: auto; rule is causing a scrollbar to appear in this particular scenario CSS: textarea { width: 100%; margin:0; padding:0; } .span4 { width: 300px; } aside { overflow: auto; } html: <asid ...

I'm encountering a strange issue where Node JS is mistakenly claiming that the method doesn't exist, even though

Ah, it seems I've encountered an error in my test project. The issue lies with Node JS not being able to locate the getStr function within the Another object. Allow me to share the code with you: test.js var Another = require('./another.js&apo ...

What are the different techniques for implementing React-Redux? Comparing Redux-thunk and Redux-Saga

My understanding of Redux is still quite hazy as I delve into various techniques and methods. I am curious to learn about other methods similar to redux-Thunk and redux-saga. Each utilizes distinct functions such as CreateSlice. I am interested to know w ...

Is there a method for viewing or manipulating an object within a JSON file?

Could someone please assist me in accessing the total sum displayed in the chart using console.log? I have tried setting it using "var item": "[[value.sum]]", but it did not work. Any help is appreciated. var chartData1 = []; generateChartData(); func ...

Steps for generating instances of an HTML page and dynamically adding them to a list on the main page

I have a main HTML page and I need to insert a dynamically generated list from a template in another HTML file that I created. The template for each item in the list is located on a separate HTML page. My goal is to create multiple instances of this HTML ...

Discovering the values within a separate JSON object

I have a collection of json objects that include information about different languages and user details. Languages User Details The user details contain a field for languages, which can have multiple values. Below is a sample json: $scope.languages = ...

Leveraging GSAP and Vue by utilizing props to dynamically calculate a maxWidth

I am working on animating buttons in my application using GSAP. The idea is that when a user clicks the button, it should animate the maxWidth of the button. I want this to be dynamic by adding a percentage of the max width set using props. Is it possibl ...

Guide to receiving intermediate feedback from my REST service for a standalone GET request

I have been working on designing a user interface that includes a progress bar to display the percentage of completion for a user request. However, my backend REST service performs complex computations and is relatively slow. I would like to provide the u ...

Can Jquery mobile detect drag gestures?

Is there an event in Jquery Mobile that allows you to hide/show a div by dragging it, similar to the effect seen on phones? I have searched on different platforms and found that using Jquery UI is the closest solution. Is it possible to achieve this only ...

Cookie Cutter Chrome Extensions

Is there a way to create a cookie that can be shared between my plugin and contentPage? I've tried creating one but it doesn't seem to appear on the cookie list of the tab page. Any suggestions or ideas on how to achieve this? ...

iOS now supports PowerPoint presentations through the use of the .pptx file format

Attempting to incorporate a pptx presentation with videos and animations into an iOS native app has proved challenging. Although UIWebView successfully renders the presentation allowing for slide browsing, it lacks interactivity such as button clicks that ...

I won't be including my accent in the ModelAndView

Having trouble with the accent on the "a" in the return of the model @RequestMapping(value="/resetPassword", method=RequestMethod.POST) public ModelAndView passwordReset(@RequestParam String username, @RequestParam String mail){ Map ...

The functionality of sending form data via Express.js router is restricted

In my current project, I am developing a basic CRUD functionality in express. My goal is to utilize the express.Router() to transmit form data via the HTTP POST method. The form structure on the browser appears as follows: form.png The process was flawle ...

Using additional properties when referencing another Mongoose schema

var UserSchema = new Schema({ job : [{ type : mongoose.Schema.Types.ObjectId, experience : String, grade : String, ref: 'Company'}] }); User's profile can include multiple jobs. The process of adding a job to the user is a ...

Is it possible to employ flexbox CSS to stack four tables on top of each other, allowing for resizing up to the maximum height of the window?

After experimenting with various setups, I have yet to find a complete solution. My objective is to have 4 tables stacked on top of each other, each starting just below 1/4 of the browser height. I want the ability to resize each table vertically, making t ...

Expanding the width of the textfield is not possible in CSS styling

My current search bar design features an input area that does not match my expectations. The input length is restricted and starts from the center rather than the black border I had envisioned. If you'd like to see the code and design in action, chec ...

Tips on eliminating horizontal scrolling in HTML and CSS

I am working on a simple web page template and encountering an issue with a horizontal scroll appearing on the page. I would like to remove it. Below is the code I am using: <html lang="FA"> <head> <meta charset="UTF-8&qu ...

The outcome displays an array of System.String objects

When I visit my GetBusiness.aspx page, a test list is created List<string> l = new List<string>(); l.Add("one"); l.Add("two"); l.Add("three"); l.Add("four"); l.Add("five"); // B. ...

Obtain offspring from a parent element using jQuery

$(document).ready(function() { $.ajax({ type: "POST", url: 'some/url', data: { 'name':'myname' }, success: function (result) { var result = ["st ...