What is the method for obtaining a unique id that changes dynamically?

Having trouble accessing the dynamically generated ID in jQuery? It seems to work fine in JavaScript but not in jQuery. Here's an example of the issue:

My jQuery code:

var img =  $("#MAP"+current_img_height);
$("#map").css({'height': img.height + "px"});

My JavaScript code:

var img = document.getElementById("MAP" + current_img_height);
$("#map").css({'height': img.height + "px"});

Can you spot any issues with my jQuery code and how can I successfully access the dynamic ID? Any assistance would be greatly appreciated.

javascriptjquerycssfrontend

Answer №1

img is actually a jQuery object, not a regular DOM element reference which means it doesn't possess the height property. Instead, it utilizes the height() method for this purpose.

$("#map").css({'height': img.height() + "px"});

Alternatively,

$("#map").height(img.height());

Answer №2

If you are utilizing $('#MAP')[0], you will be able to retrieve the object.

        document.getElementById('#MAP');//This will give you a DOM Object
        var img = $('#MAP')[0]; //Returns an HTML DOM Object

        var img=$('#MAP'+current_img_height)[0];

Answer №3

When writing your code :

$("#MAP"+current_img_height);

(assuming current_img_height is equal to 100)

This translates to $("#MAP100"); *(for example : <img id="MAP100"> is an element with the specified id "MAP100"

If you need to extract the height from an element: follow these steps

var height = $("#whateverID").height();

or 

var height = $(".whateverClass").height();

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

What is the best way to assign a percentage width based on a variable in jQuery?

Is there a way to assign a dynamic width value to an element? Here is the code I am using: $(".menu_list_item").css({ width: width + "%" }); Unfortunately, this doesn't appear to be functioning correctly. If anyo ...

javascriptjquerycss

Showing canvas lines while dragging (using only plain JavaScript, with React.JS if needed)

Is there a way to add lines with two clicks and have them visible while moving the mouse? The line should only be drawn when clicking the left mouse button. Any suggestions on how I can modify my code to achieve this functionality? Currently, the lines are ...

javascriptreactjstypescriptcanvas

Converting input dates in nest.js using TypeScript formatting

Is it possible to set a custom date format for input in nest.js API request body? For example, like this: 12.12.2022 @ApiProperty({ example: 'ADMIN', description: 'Role name', }) readonly value: string; @ApiProperty({ ...

javascripttypescriptnestjs

Is there a way to incorporate vue samples into an independent HTML document?

Striving to broaden my knowledge of Vue, I set out to create a page with tabs inspired by one of the Vue examples available at . However, an obvious error seems to be eluding me, as I encounter a syntax issue on the line import * as Tabs from 'vue-s ...

javascriptvue.js

What is the best method to create random coordinates that fall outside of the circle located within a rectangular area?

Suppose the following scenario: A rectangular area with dimensions length l and breadth b A circle with a radius r The circle is positioned inside the rectangular area as depicted in the image below Check out the image here - Red areas show expected even ...

javascriptmathgeometry2dpolar-coordinates

Display the retrieved information from MongoDB onto a jade template

Upon checking the console, I see output similar to this: [ { __v: 0, city: 'on1', address: '111', first: 'user', last: 'one', chart: 'char1', doctor: 'doc1', _id: 5698a803d98f05482ba48a4b }, { __ ...

javascriptnode.jsmongodbexpresspug

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

javascriptcssloadingmultiple-columns

Eliminate any duplicate items from the array containing objects

I've been struggling with this issue for a week now, hopefully someone here can help me out... The application I'm working on was created using Laravel with Vue for the frontend. Essentially, I have an array of objects that need to be sent to t ...

javascriptlaravelvue.js

Generate a fresh FileReader instance using the downloaded file via XmlHTTPRequest

I am attempting to use an XmlHTTPRequest object (level 2) downloaded through a "GET" request in order to create a new FileReader object. My goal is to create the FileReader object within the onload function of the xhr. The file, which is a .gz file, downl ...

javascriptajax

Having trouble grasping the error message "Uncaught Typerror Cannot Read Property of 0 Undefinded"?

As I embark on creating my very first ReactJS website with Node in the back-end, I encountered an issue in fetching and printing data. While I successfully displayed the names, pictures, and emails of project members from the server, I faced an error when ...

javascriptreactjs

Prevent validation on a particular input field with JQuery validator and Bootstrap

Is there a way to use JQuery validator to validate an entire form except for a specific input? Here is an example code snippet showing how this can be done: jQuery.validator.setDefaults({ debug: true, success: "valid" }); ...

javascriptjqueryjquery-validatebootstrap-5

Why is my jQuery clearQueue function malfunctioning?

I'm facing an issue with my AJAX function where multiple notifications are being displayed if the user calls it repeatedly in a short span of time. I want to show the notification only once and avoid queuing them up. AJAX FUNCTION function update(up ...

javascriptjqueryajax

Selenium WebDriverJs has difficulty in setting up a new client for iOS devices

Struggling to make Selenium WebDriverJS work with the iOS browser, but unfortunately facing some issues. I followed the instructions on setting up the "iWebDriver" project as mentioned on the iPhoneDriver wiki page. The Python script worked fine, and even ...

javascriptiosseleniumselenium-webdriver

Another option in place of MicrosoftAjax using JQuery

Currently, I am utilizing <script src="../../Scripts/MicrosoftAjax.js"></script> <script src="../../Scripts/MicrosoftMvcAjax.js"></script> <script src="../../Scripts/jquery-1.8.3.js"></script> However, the MicrosoftAja ...

jqueryajaxasp.net-mvc-4

What is the best method for tracking the execution time of functions in Node.js?

My nodejs application has numerous functions that need to be executed. I am looking for a way to log the time taken to execute each function. For example, when my app runs these functions: execfn1(); -> should output in some log, takes: 1ms.. execfn ...

javascriptnode.jsperformance-testingv8

What is the best approach in Ruby for managing an unordered list with split columns and counting each

I am currently in the process of strategizing the layout for a webpage utilizing Bootstrap 4 within Ruby on Rails. Specifically, I need to create a sidebar submenu that can expand and collapse, feature bullet points, and include a counter. The desired out ...

htmlcssruby-on-rails

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

javascripthtmlcsslazy-loading

element obscured by overlapping elements

I'm unsure why this issue is occurring; it seems to be a CSS error, but I can't pinpoint the exact location. Working on this in Rails, so I'm relatively new to it, but it should follow standard CSS practices! The "ticket" element appears t ...

htmlcss

Revolutionize iPad user experience with seamless HTML5 video integration

What is the most effective method for dynamically embedding HTML5 video to ensure compatibility with the iPad? (using pure Javascript) I'm having difficulty getting this approach to work: <div id="placeholder"><script type="text/javascript" ...

javascripthtmlipadvideoembed

Slider for jQuery or Ajax framework

Currently, I am in search of a gauge that contains multiple concentric circles, with each circle displaying values of different entities, similar to the image provided. Each individual needle indicates the value of its corresponding entity. I have come a ...

javascriptjqueryajax