A method for utilizing wildcards in conjunction with the .load function

Currently, I am utilizing jquery, jquery mobile, js, html, and css within Phonegap to develop my android/ios application.

However, my understanding of js & jquery is somewhat limited.

In my index.html file, I use .load to load other html files into specific divs based on their names.

Is there a way to streamline the following code:

$('#page01001').load('cards/01001.html');
$('#page01002').load('cards/01002.html');
$('#page01003').load('cards/01003.html');
$('#page01004').load('cards/01004.html');
..
$('#page01900').load('cards/01900.html');

(which currently takes up nearly 2000 lines in my .js file), with a single rule that would work like this:

$('#pageIDENTIFIER').load('cards/IDENTIFIER.html');

so that any div with the name "pageWHATEVER" will automatically load an html file with the corresponding name (minus the word "page")?

I have researched jquery wildcards, but haven't been able to figure out how to then implement that wildcard input in the second part of the command.

To make it slightly more complex, there are multiple instances in index.html where references to the same html file occur:

$('#page01001').load('cards/01001.html');    
$('#pageX01001').load('cards/01001.html');
$('#pageH01001').load('cards/01001.html');

Therefore, the divs "page01001", "pageX01001", & "pageH01001" all need to load 01001.html.

Additionally, there are numerous divs that are merely placeholders and do not require loading any content. I only want to target divs that begin with "page.." for loading purposes.

Can you suggest any improvements to simplify this process?

Answer №1

Utilize a .each() loop in combination with a regular expression to retrieve the page number from the ID.

$("div[id^=page]").each(function() {
    var match = this.id.match(/\d+$/)[0];
    $(this).load('cards/' + match + '.html');
});

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

Acquire the key name of an object during iteration in Jade

const information = { attribute1: 'value1', attribute2: 'value2', attribute3: 'value3' }; for each value, key in information li= value.keyname?? The desired result should be: <li>attribute1</li> <li ...

Populate form fields with dynamic data using jQuery and Ajax JSON response

I'm currently working on parsing returned data from JSON into form fields using an autocomplete form. I've successfully implemented the autocomplete feature. jQuery(document).ready(function() { var autocompleteArray = new Array(); jQuery("#bus ...

Refresh Bootstrap modal with Ajax update

I have implemented a modal for user profiles on my website. When the "Edit Profile" button is clicked, I want to populate the fields with existing data using Ajax. However, as I am new to Ajax, I am facing difficulties in making it work. Here is the struc ...

Having difficulty installing Cordova CLI

When attempting to set up the Cordova CLI using "sudo npm install -g cordova", everything appears to be functioning properly: /usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova <a href="/cdn-cgi/l/email-protection" class="__cf ...

Retrieve data from a URL using Angular 6's HTTP POST method

UPDATE: Replaced res.json(data) with res.send(data) I am currently working on a web application using Angular 6 and NodeJS. My goal is to download a file through an HTTP POST request. The process involves sending a request to the server by calling a func ...

Having difficulties creating an array due to identical id tags causing HTML to break in JavaScript

I've been grappling with this issue all day. Before delving into dynamic solutions, I'd like to create multiple divs with unique id tags or classnames rather than repeating ids. Whichever option proves simpler would be greatly appreciated. Curren ...

The Jquery navigation and image display features are experiencing technical difficulties in Internet Explorer

My website is currently in the development stage and functions well on all browsers except for IE10. Interestingly, both the menu bar and photo gallery, which rely on Jquery, are not functioning properly in IE10. Below is the code snippet: <script ty ...

Concealing the ellipsis in the will_paginate function of Rails

I'm currently utilizing will_paginate to manage a large number of values, but I am struggling to find a way to hide the "..." portion and the page numbers following it. Here is my current setup: https://i.stack.imgur.com/f2Tt8.jpg However, what I wou ...

An effective approach to automatically close an Expansion Panel in an Angular Mat when another one is opened

I am attempting to implement functionality where one expansion panel closes when another is opened. By default, the multi attribute is set to "false" and it works perfectly when using multiple expansion panels within an accordion. However, in this case, I ...

Capturing JSON response in Jquery

I'm struggling to figure out what's going wrong with this code. I can't seem to get any response in the status field... <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"> </script> <input typ ...

Issue in PHP Wordpress when trying to access an index that is

I seem to be facing a common issue that others have experienced, but I can't quite figure out where the problem lies. (I've double-checked the isset() function in my code and it appears fine, yet it's still not allowing an email message to b ...

Highcharts Date Confusion

My JSON data includes timestamps and values like: [ [1230768000,2], [1233446400,3], [1235865600,2], [1238544000,6], [1241136000,1], [1243814400,2], [1246406400,7], [1249084800,3], [1251763200,5], [1254355200,2], [1257033600,5], [1259625600,4] ] The dates ...

Unique name for the transition animation on SSR-Nuxt page transitions

Attempting to implement a dynamic transition name for Nuxt page transitions as shown below: export default{ data() { return { prevHeight: 0, transitionName: 'page' }; }, transition: { na ...

Abundance of DOM elements - the difference between hidden and display none

When I have numerous DOM elements on my page and assign them all a display: none property, the browser continues to perform quickly (smooth scrolling and snappy page response). But if I hide the elements using visibility: hidden instead, the browser slows ...

Jpicker is renowned for its transparency feature

I am currently using the Jpicker jpicker-1.1.6.js script which can be found at Below is a snippet of my code: <script type="text/javascript"> $(function() { $.fn.jPicker.defaults.images.clientPath='/img'; var ...

Can you explain the functionality of this Angular JS code snippet?

How is it possible that the following code snippet works in Angular JS? var app = angular.module('store',[]); (function(){ app.controller('StoreController',function(){ this.blabla = student; }); })(); var student = ...

Unveiling the Magic of Django's Ajax Model Form

I am working with two models in my Django project: class Exercise(models.Model): text = models.TextField() class Score(models.Model): user = models.ForeignKey(User) exercise = models.ForeignKey(Exercise) score = models.IntegerField() class Meta ...

Fade in and out MaterialUI text using useEffect in combination with setInterval

I have implemented a text carousel using MaterialUI's Fade component. The carousel displays text from an array provided in a prop called dataArray. To achieve the carousel effect, I am toggling the boolean value of the Fade component and updating the ...

No outcome when using Jquery and JSON

Check out my test code snippet here: http://jsfiddle.net/BjLdQ/2 I am trying to input the number 1 in each HTML field, click the login button, and receive the JSON response as: {"code":"2"} However, when I try to achieve the same using jQuery by clickin ...

Webpack has successfully built the production version of your ReactJS application. Upon review, it appears that a minified version of the development build of React is being used

Currently, I am implementing Reactjs in an application and the time has come to prepare it for production. In my package.json file, you can see that there is a "pack:prod" command which utilizes webpack along with a specific webpack.config.js file to build ...