Each div will display the same image twice when loading the image

I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it:

$(".selection_thumb").each( function(i) {
    $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++i)+".jpg'><img src='img/folder/"+(++i)+".jpg' alt='alttext' /></a>");  
});

However, the issue is that it is loading like this:

<a data-lightbox="image-1" href="img/folder/folder/1.jpg"><img src="img/folder/2.jpg" alt="alttext" /></a>

Instead of how it should be:

<a data-lightbox="image-1" href="img/folder/folder/1.jpg"><img src="img/folder/1.jpg" alt="alttext" /></a>

It seems to be loading different numbers 1 and 2 instead of 1 and 1.

Any assistance would be greatly appreciated

javascriptjqueryhtmlcssforeach

Answer №1

It is important to remember to use i++ instead of ++i because they operate differently.

Using ++i will return the value of i after it has been incremented, while i++ returns the value of i before incrementing.

Referenced from What's the difference between ++i and i++ in JavaScript

Answer №2

Attempt this:

let cache = null;

$(".selection_thumb").each( function(index) {
    cache = ++index; 
    $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+ cache +".jpg'><img src='img/folder/"+ cache +".jpg' alt='alt text' /></a>");  
});

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

Update dataTable with new data fetched through an ajax call from a separate function defined in a different

I need to refresh the data in my datatable after using a function to delete an item. The function for deleting is stored in a separate file from the datatable. Here is the delete function code: function removeFunction(table,id) { var txt= $('.ti ...

javascriptjqueryajaxdatatable

Guide on assigning a value to a material ui select box

Currently, I am utilizing the material UI Select component for the year field in my project. What I aim to achieve is setting a default year based on the value present in the state. To populate the years, I am using an array of years. Here is the method r ...

javascriptarraysreactjsselectmaterial-ui

Issue with Jquery Forms Plugin jqXHR response in Internet Explorer versions 8 and 9

I encountered a peculiar problem that only seems to occur in IE8 and 9, despite testing on Safari, Chrome (on Mac), Firefox (on PC), as well as IE versions 10 and above. Below is the code snippet causing trouble: $('#fileStore_newUpload').ajaxF ...

jqueryhtmlajaxinternet-explorerjqxhr

Enhance fullness to facial features

Creating walls by forming faces using specific points is a successful process for me. However, I am now looking to add thickness to these walls, and I am unsure of the best approach. Below is the code I currently use to create the walls: makeWall(start, ...

javascriptthree.js

`Javascript framework suggests ajax navigation as the preferred method`

What is the best way to handle ajax navigation using jQuery? I have recently experimented with a simple jQuery ajax code to implement ajax-based navigation for all the links on a webpage. $('a').click(function(e){ e.preventDefault(); ...

javascriptjqueryhtmlajax

Stop procrastinating and take action before the JavaScript function concludes

Currently, I am experimenting with onkeydown events to capture the input value in a textarea, process it through a PHP file using Ajax post method, and display the result in an external div. However, the issue is that whenever a key is pressed, I am unable ...

javascriptajaxwait

Searching in the Kendo Dropdown List using text and value

$(document).ready(function() { $("#selection").kendoDropDownList({ filter: "startswith", dataTextField: "SelectionName", dataValueField: "SelectionID", dataSour ...

javascriptangularjskendo-uikendo-dropdown

problem with CSS negative margin

When trying to position the navbar inside a div with the class main using negative margins, it causes issues on small screens when clicking on the toggler icon. How can I address this problem without relying on negative margins? <link rel="stylesheet" ...

htmlcss

The operation failed because the property 'dasherize' is inaccessible on an undefined object

While attempting to execute the following command: ng generate component <component-name> An error occurred saying: Error: Cannot read property 'dasherize' of undefined Cannot read property 'dasherize' of undefined The confi ...

javascriptangularnpmangular-cliangular5

Is this AJAX request properly formatted?

I am attempting to send an array of variables to my CakePHP action for editing purposes. The array is created from the ids of table rows. Below is the javascript code snippet that can be found in my index.ctp file. <script type="text/javascript"> $( ...

javascriptajaxcakephp

Stuck with the Same Theme in the AppBar of material-UI?

Currently, I am attempting to modify the theme of a material-UI AppBar by utilizing states. Strangely enough, although the icons are changing, the theme itself is not. If you'd like to take a look at the code, you can find it here: https://codesandbo ...

javascriptcssreactjsmaterial-ui

The <HTML> element is just a bit too big for the screen

When viewing my webpage on mobile, the video background does not fit the screen properly (it fits in landscape orientation). Here is the video tag I am using: <video autoPlay loop muted playsInline className='absolute w-full h- ...

htmlcssreactjsmobiletailwind-css

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

Currently, I am working through the React tutorial and have encountered a question regarding their starter code: class Square extends React.Component { render() { return ( <button className="square"> {/* TODO */} </butto ...

javascripthtmlcssreactjs

Modify the CSS of a single element when a class is applied to a different element

I need to apply a specific CSS attribute to my submit button on the comments form when a user is logged in to Wordpress! When the .comment-form class contains p class="logged-in-as" instead of the standard p class="comment-notes", I want the p.form-submit ...

javascriptjquerywordpress

Convert JSON data into the desired format

My JSON input is as follows: [ { "date": { "value": "2022-05-01" }, "parent": { "value": "Choclate" }, ...

javascriptjsonfor-loopjavascript-objects

Monitoring the content of a page with jQuery and adjusting the size as needed

Here is a code snippet: function adjustContainerHeight() { $('div#mainContainer').css({ 'min-height': $(document).height() - 104 // -104 compensates for a fixed header }).removeShadow().dropShadow({ 'blur&a ...

javascriptjqueryhtmlcss

Transforming the color of a globe from black to white with gio js

After searching for a solution to change the color of a Three.js globe, I came across a link that didn't work as expected: Change the color of a Three.js globe. My goal is to change the globe color from black to white using . I attempted to use the f ...

javascriptjqueryhtmlcssthree.js

Are JS commands enough for using Node.js dom APIs like jsdom and cheerio, or do I have to rely on jQuery for these tasks?

Is there a DOM API available for Node.js that allows me to use pure JavaScript commands? I prefer not to use jQuery as I already have existing code in vanilla JS. ...

javascriptjquerynode.jsdom

Error Message: ElectronJS - Attempted to access the 'join' property of an undefined variable

I am currently working on developing a tray-based application. However, I am encountering an error that reads: Uncaught TypeError: Cannot read property 'join' of undefined Can anyone guide me on how to resolve this issue? This is the content ...

javascriptnode.jstypescriptelectron

Invalid Syntax: The token '21' is found unexpectedly at column 12 in the expression [2013-08-28 21:10:14] beginning at [21:10:14]

I'm in the process of creating a straightforward directive for a date countdown. However, I've hit a roadblock with this particular error: Syntax Error: Token '21' is an unexpected token at column 12 of the expression [2013-08-28 21:10 ...

javascriptangularjsangularjs-directive