Display all elements that come before and after the current element

For debugging purposes, I need to output the IDs of all previous images in a check. The issue arises when trying to assign classes to all previous elements using the script below, as the images are not being added to the correct classes.

$(document).on('click', 'img', function() {
   var t=$(this);
   t.prevAll().removeClass('t2').addClass('t1');
   t.nextAll().removeClass('t1').addClass('t2');

To see an example, visit this jsFiddle. When clicking on any image, my goal is to assign the previous images to one class and the next image to another class.

jqueryhtmlcss

Answer №1

One way to achieve this is by utilizing the .map function in jQuery.

Here's an example that demonstrates how to obtain a list of checkbox IDs separated by commas:

var numbers = $(':checkbox').map(function() {
      return this.id;
}).get().join();

alert(numbers);

As a result, you will receive the string, "two,four,six,eight".

Answer №2

The img tags currently do not have any id attributes assigned to them. However, assuming they will have id attributes in the future, you can utilize the map method to retrieve these IDs:

var ids = t.prevAll().removeClass('t2').addClass('t1').map(function(){
      return this.id;
}).get().join();

console.log(ids);

It appears that the images are not being assigned to their proper classes.

If you also want to add a class to the clicked element, you can make use of the addBack method:

t.nextAll().addBack().removeClass('t1').addClass('t2');

http://example.com/jsfiddle

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

When a specific option is selected in a `select` element with the `multiple` attribute, activate the change event

Is it possible to trigger a change event on individual options within a standard select element using jQuery or another method? I want the change event to be triggered on the option elements themselves rather than on the select element, as multiple options ...

javascriptjqueryjquery-selectors

jQuery still not running despite using .ready

I have been attempting to run some jQuery code on my HTML page. After doing some research, I learned that using .ready may be necessary to ensure the DOM is fully loaded before executing the script. Despite this, I am still having trouble getting the scrip ...

javascriptjquery

Navigating through sibling elements can be accomplished by using various methods in

Can someone help me figure out how to assign unique IDs to 6 different Div elements as I step through them? The code snippet below is not working as expected, giving all Divs the same ID. What is the correct way to accomplish this task? $('#main-slid ...

javascriptjquerycssiterationstep-through

Loading/Adding JS script in an asynchronous manner

In my Laravel project, I am implementing templates for different pages based on a main page. Each page requires different JS scripts to function properly, so I created a template to import these scripts: <!-- jQuery 2.1.3 --> <script src="{{ URL: ...

javascriptjqueryajaxlaravel

Placing an image within a table row that spans multiple rows to maintain center alignment in relation to other rows that are not span

Having trouble with centering the image in an email signature when viewed in GMail. The layout works fine in JSBin but appears uneven in GMail. Any suggestions on how to make sure it stays centered? Check out the code here <table cellspacing="0" cel ...

htmlcsshtml-table

Stop the css animation from playing

I created a slideshow using HTML and CSS, and I'm looking to implement a feature where the slideshow pauses when my mouse hovers over it. I attempted to achieve this by using -webkit-animation-play-state: paused;, but unfortunately, it only pauses one ...

htmlcssanimationslideshow

The concept of CSS inheritance within div elements

I've been researching extensively about the concept of CSS inheritance, but I have come across a puzzling question that remains unanswered. Consider the code snippet below: <!DOCTYPE HTML> <html> <head> <style type="text/css"> ...

csshtmlinheritance

Transforming a string into an array via AJAX response

I have been working on some ajax code that is returning an array as a string. My goal is to display either the first value or the second one in the array, like response.total or response[0]. When I check the response using console.log(response), here is w ...

jqueryajax

Jimdo: Generate a spinning sliced circle with the click of a button

I'm attempting to achieve a spinning CD/Disk effect when the play button is clicked. I have a sample code below that represents the player's state during playback. What I envision is an image with a play button on top. Upon clicking the button, ...

javascriptjqueryhtmlcss

Tips on postponing the loading of an iframe within a collapsed div using jQuery until the div/button is clicked

So I'm dealing with a bunch of these collapsible divs on a single page, each containing an iframe. (I used some CSS to make it look like a button when clicked). The issue is that the page is loading very slowly because it's loading all the domai ...

javascriptjqueryiframedelay

How to automatically set a default bootstrap tab upon page load using an MVC JsonResult responseData

I'm looking to enhance the user experience on my dashboard by allowing users to set their preferred default tab view upon logging in. Using an AJAX call to retrieve the value from the database in MVC, I am working on the JS/Razor side of things to mak ...

jquerycsstwitter-bootstrap

Leveraging the power of Ajax to dynamically submit a single form nested within a forEach iteration

I'm currently working on a database query that retrieves all user posts. This query is then used in a forEach loop to generate a post for each result: for($indexPost=0; $indexPost < $postCount; $indexPost++) { //Code for handling the post echo&l ...

phpjqueryajaxforms

The functionality for tabbed content seems to be malfunctioning on Chrome and Firefox, however it works perfectly

In my index.js file, I have various functions set up like so: // a and b is placed at index.jsp $("#a").click(function (){ //this works on index.jsp and display.jsp(where the servlets forwards it). $("#b").load('servletA.html?action=dis ...

javascriptjqueryhtmljsp

Ways to calculate outcome

I'm fairly new to PHP and have run into an issue regarding displaying the number of results. For example, showing 'There are 200 results'. Thank you in advance. Below is the code I am working with: try { $bdd = new PDO("mysql:host=localho ...

phphtmlcsssqlcount

Error encountered while retrieving the cropped image, atob function was unable to execute

I am currently facing an issue with saving a cropped image in Chrome. When I try to save it, the download fails when using the Download button that I added to the page. I have successfully used ngx-image-cropper for cropping the image as intended. The cro ...

htmlangular

Buttons in Jquery refusing to execute click function

I'm attempting to dynamically change the text below my form based on the user's selection of either 'yes' or 'no' through 2 radio buttons. The function getCats is responsible for setting catVal to the chosen radio button value ...

jquery

Transfer external variables into the image's onload function

I am trying to retrieve image dimensions and then execute additional actions. Since the image onload function is asynchronous, I have decided to handle everything within the onload call. This is my current approach: function getMeta(url, callback) { v ...

javascriptjquery

What is the preferred convention for defining AngularJS directives as "attributes" versus "elements"?

When creating Angular directives, I've noticed that some directives could also be defined as either an HTML element or an attribute. I'm curious to know what the community convention is for choosing between the two, and the reasons behind it. Fo ...

javascripthtmlangularjs

Changing time format from ISO time to short time in JavaScript

I am working on an ajax call that retrieves a time in the format 16:06:59, and I need to convert it to 4:06 PM. var mydate = obj[0].time; The variable mydate contains 16:06:59, but when I try to use it with var date = new Date(), it returns today's ...

javascriptjquery

Using CSS to break or wrap long words in text

I have a div that spans the width of the page. I'm looking to ensure that a very long word in this div breaks and wraps properly, so all the content stays within the screen width and doesn't overflow beyond 100%. Although I've attempted usi ...

htmlcss