How to use jQuery to retrieve the second and third elements from a sorted list

Our task is to modify the URL of the image for the second and third elements within an ordered list using jQuery without converting the list to an unordered list. We are looking for a solution to specifically target and modify the class or image of these two list items.

<div class= "image-gallery"> 

 <ol class ="image-control image-flex-control">

  <li> <img src="URL"> </li>
  
  <li> <img src="URL1"> </li>
  
  <li> <img src="URL2"> </li>

 </ol>

</div>

We specifically need to update the src attribute for the second and third items in the list. How can we achieve this using jQuery?

htmljquerycssjquery-selectors

Answer №1

To accomplish this task, you can utilize the .slice() method within a foreach loop.

Keep in mind: The .slice() method starts counting from 0 (zero).

$("li img").slice(1).each((key,val) => {
    $(val).attr('src','IMAGE URL')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "image-gallery"> 

 <ol class ="image-control image-flex-control">

  <li> <img src="URL"> </li>
  
  <li> <img src="URL1"> </li>
  
  <li> <img src="URL2"> </li>

 </ol>

</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

Exclude the header HTML when exporting data to a file with jQuery DataTables

I've encountered a problem with my simple data table. I added a custom tool-tip div in the datatable for the headings, following this reference. However, when I export the file to excel or PDF, the tooltip text is also included in the exported file. ...

jqueryangulardatatablesdatatables-1.10

Utilizing Flexbox for a standalone section

I have a specific section in my HTML where I want to utilize flexboxes. The CSS provided is affecting all other rows and columns in my code. How can I ensure that this CSS only impacts the specific HTML section I have included here? Thank you! .row { ...

htmlcsstwitter-bootstrapflexboxcss-selectors

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...

javascriptjqueryhtmlcssimage-resizing

Identify a specific HTML template using jQuery

I am currently working on implementing datepickers in various HTML templates. The issue I am facing is that the functionality only seems to work in my index.html file. When I try to replicate the same setup in another template, it does not function proper ...

jqueryhtml

The sign out option fails to erase the data stored in Local Storage

After implementing a login feature that stores a token in local storage, I encountered an issue with the logout button. The intention was for the button to delete the token from local storage and set the user to null upon clicking it. However, this functio ...

htmlangulartypescript

reduce the size of the image as the browser width decreases

Struggling with a webpage layout that features an image on the left and content area on the right, both with fixed widths. When reducing browser width, the image should not shrink but be cropped from the left side instead. Any solutions for this issue? ...

javascripthtmlcss

Guide to invoking a bootstrap modal dynamically within a loop with the help of jQuery

I'm currently facing an issue with my code that involves inserting data into a database. The code is set up to check if the data already exists, and if it does, prompt the user with a Bootstrap modal to confirm whether they want to continue adding the ...

jqueryajax

When sending a single apostrophe as a parameter in an AJAX post request, it will result in an error

JavaScript Code: var name = jQuery("#name1").val(); jQuery.ajax({ url: siteUrl + 'search/ind', type: 'POST', data: { name: name, }, success: function(data) { jQuery('#input').val(''); } } ...

javascriptjqueryajax

displaying a separate HTML file with its own distinct CSS styling

Recently, I was tasked with investigating an existing website. Currently, the website utilizes a single root html file that contains multiple iframes linking to external html pages. However, the team behind the website has noticed that this setup is causin ...

phphtml

Text vanishing upon the loading of an HTML webpage

I am experiencing an issue where the text on my webpage disappears after it loads, and I am struggling to figure out the cause. (I did not create the site) The white text displayed on top of the header image initially appears correctly but then vanishes. ...

jqueryhtmlcss

Make an ajax request to a method in YII framework

I need to send an AJAX call to a function within the directory structure outlined below: Yii::$app->request->absoluteUrl."protected/humhub/modules/post/controllers/PostController/UploadMusicFile"; Here is my view function: function uploadImage ...

javascriptphpjqueryajaxyii

What is the best way to fetch the id of the option that has been chosen from a bootstrap drop-down menu?

I recently created a basic drop-down list like this: https://i.sstatic.net/4Tlxx.png Here is the HTML code for it: <select class="form-control" id='0' (change)="retrieveValue($event.target)"> <option id='0'>{{ g ...

javascripthtmlangulartypescriptbootstrap-4

Extracting an ID value from a select box in Vue.js

I'm attempting to extract the value of idTipoExame from the following JSON: { "idTipoExame": "11", "mnemonico": "AUR", "exame": "ACIDO URICO" }, { "idTipoExame": "24&qu ...

javascripthtmljsonvue.js

Record client's real-time decision in the database

Is it possible to use jQuery to update a specific cell in phpMyAdmin after adding a div to a particular group? Take a look at the code below: <div id="item1">Item 1 <input type="button" value="put me in Group1" name ...

phphtmljquerysql

Utilizing .trigger repeatedly within a loop

I am in search of a solution to iterate through items in a select box, checking if any of them already have quantity data saved in the API, and then appending those items to the page. My current code achieves this by using .trigger('change'), bu ...

javascriptjquery

establishing the default value as p-multiselect

Here is the code snippet I am currently working on: export class LkBoardStatus { id : number = 0; descr : string = ''; } In the component.ts file, I have defined the following: //... lkBoardStatusList: LkBoardStatus[] = []; selectedStat ...

htmlangulartypescriptdrop-down-menuprimeng

JQuery Validation - Implementing real-time validation on button click instead of form submission

I am currently attempting to use JQuery Validation with WebForms/html. I have simplified the HTML code below, displaying only the necessary elements: <input id="txtEmail"/> <input id="txtTicketID"/> <a id="create" href="#">Create a new t ...

asp.netjavascriptjquery

Issue with onClientClick not functioning properly when performing a jQuery function call

How can I make a jQuery form appear when an ASP.NET server-side button is clicked by the user? Currently, when I click on the button during runtime, the page reloads quickly without displaying the jQuery form. I am aiming to achieve a similar effect show ...

javascriptjqueryhtmlasp.netonclientclick

The issue of a non-functional grid with scroll in a flexbox

I've encountered a problem while working with the grid layout using divs and flexbox. The header, which I want to be fixed, is overlapping with the first row and I'm struggling to get the scrolling behavior right. How can I address this issue? I ...

javascripthtmlcssflexbox

Is there a way to automatically make required fields turn red upon form load using model validations in MVC?

After implementing Model validations and remote attribute validation, I noticed that all mandatory fields turn red when the submit button is clicked. Is it possible for all mandatory fields to turn red upon form load instead? ...

jquerycss