My nodes sometimes have a dot in their ID attribute, as shown in this example:
<div id="site_someSite.com"></div>When I try to select this element using jQuery with the following code:
variable = $('#site_'+user); (where user is 'someSite.com')
I am not getting anything stored in the variable. It seems that jQuery is interpreting the dot as a class instead of part of the ID. Does anyone know how to address this issue without avoiding the use of a dot?
One way to utilize this feature is by adding backslashes before it, like in the following example: $('#sample\\.afterdottext');
According to official documentation
In order to include any special characters (such as !"#\$%&'()*+,-./:;<=>?@[\]^_{|}~) as a literal part of a name, they must be preceded by two backslashes: \.
Implementing attribute selectors in your jQuery code:
var domain = 'someDomain.com';
var element = $('[id="domain_' + domain + '"]');
// perform some action
element.css('background-color', 'orange');
Sources for further reading:
Here's a possible solution -
value = $('#location_'+customer.replace(/\./g,'\\.'));
Try it out ---> http://jsfiddle.net/abc123/4/
If you only want to select by the unique `id`, you can simply utilize `document.getElementById`:
var selectedDiv = document.getElementById('site_'+user);
Keep in mind that this will return a native DOM element. If you require a jQuery selection instead, you can enclose it within the jQuery constructor:
var selectedDiv = $(document.getElementById('site_'+user));
One benefit of this method is that it is faster! However, please note that it may not work if there are other elements included in your selector.
I have a unique scenario where there is an iframe on my page that calls a URL from a different domain. Occasionally, this URL will tunnel to a different URL than the one I specified. Unfortunately, due to cross-domain restrictions, I am unable to view the ...
Can a simple jQuery each loop be used to declare variables? For example: jQuery.each(["var_name1", "var_name2", "var_name3"], function(){ $[this] = this; }); Similar to creating a variable variable in PHP. I could store everything inside an object, bu ...
https://i.sstatic.net/jMT5g.png I am attempting to create a vertical floating button for my website, but the text is displaying outside of the box. CSS #feedback { height: 104px; width: 104px; position: fixed; top: 40%; z-index: 999; tr ...
I am in need of assistance with getting the correct div to display on top when viewed on a mobile device using Bootstrap. The issue is discussed and resolved in this particular discussion. To clarify, I would like my desktop layout to appear as follows: A ...
I have created a custom Javascript function for extracting specific data from a matrix. The main purpose of the function is to retrieve data based on dates within a given range. Here's how it works: The matrix[0][i] stores date values I need to extr ...
My struggles with jQuery involve handling an Ajax/JSONP request. I am faced with the challenge of working with two different domains and making multiple simultaneous ajax calls. Therefore, I need to rely on a randomly generated callback name by jQuery to ...
In my single page application, I have a fixed container and I am trying to make one div inside this container overlap the boundaries of the fixed container while also vertically scrolling with its contents. Unfortunately, I have only been able to achieve e ...
After finally getting the datepicker to function in my modal dialog, I encountered an issue where it doesn't open automatically the first time I click on it (as expected). However, when I close the dialog and reopen it, the datepicker pops up automati ...
I've been exploring the use of multiple router outlets and encountered an issue. When using the navigateBy function of the router, I am unable to view my child route and encounter an error. However, when I access it via the routerLink in HTML, I get ...
Is there a way to use content variable with in-line styles in React? I am unsure of how to accomplish this. CSS3 .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40p ...
I need your help with a problem I'm facing. The navigation bar is not collapsing when I click the link in mobile view. Check out this video for more details: https://www.youtube.com/watch?v=2dBpcFMjqY0 ...
Whenever I attempt to use this code snippet, it doesn't seem to work properly. How can I prevent the submit behavior of an asp:ImageButton? Here is the HTML code I am working with: <td class="style101"> <asp:ImageButton ID="imgBtnPos ...
Currently, I am engaged in web scraping using Selenium. Successfully locating the input box and entering ID numbers is no issue. Yet, a roadblock presents itself - there is no submit button linked to the search bar. Once the numbers are inputted, the box a ...
I have encountered an issue while trying to create a selectpicker using Bootstrap 5 with optgroups. The problem is that all option elements under each optgroup are identical and do not match the HTML structure I have defined in my file. This inconsistency ...
I'm new to programming in JavaScript and jQuery and I wanted to implement an exit pop-up feature. While I came across a helpful tutorial online, I encountered an issue where users could only exit by clicking on the "X" button. I want them to be able t ...
Object = { 0 : { NAME: 'A' , PET :'DOG' , AGE : 'NINE' }, 1 : { NAME: 'B' , PET :'CAT' , AGE : 'TEN' }, 2 : { NAME: 'C' , PET :'TURTLE' , AGE : '' } } HT ...
As a beginner in CSS, I am facing challenges in creating a responsive layout that adjusts based on the screen it is viewed on and achieving equal heights in columns. While I have been able to address these issues individually, combining them has proven to ...
When creating a horizontal navigation bar with an image, I encountered an issue where the image link did not align with the rest of the links on the navigation bar. I wanted to drop it down by a pixel or two without affecting the position of the other link ...
Currently, I am utilizing the jQuery-ui.css (smoothness) solely for the calendar CSS. Can anyone provide me with a comprehensive list of all the calendar CSS functions available in it? I'm looking to avoid using any unnecessary CSS that might be causi ...
Having an issue in Chrome that doesn't occur in Firefox. When hovering over a PNG within a carousel plugin or dragging an element with Jquery, the hover image briefly distorts the background. Looking for a solution to improve user experience. Let me k ...