Display all elements that come before and after the current element

Question

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.

jquery html css

Answer 1

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

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 3

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

Answer 4

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

Display all elements that come before and after the current element

Answer №1

Answer №2

Similar questions

How can I use AngularJS to filter ng-repeat values based on the input ng-model value of another field?

Vertically Center Image in a Div

Using Jquery: Knowing when to utilize "this" and when to use "$(this)"

Generating dynamic input field values using jQuery in a CodeIgniter PHP framework application

Mobile devices not showing the Navbar bootstrap menu

Using Rails and Stripe: Sending out a form and effectively managing errors with AJAX

I updated the color of my a:link using jQuery, but now my a:hover is not functioning as expected

Using jQuery's .html() method will remove the selected attribute from the dropdown menu option

Tips for automatically collapsing the Bootstrap 4 Sidebar on smaller devices

Reduce the dimensions of a CSS attribute automatically

Expression fragment in Thymeleaf

Issue with Angular / SCSS where animation is not being executed on the specified element

Struggling to accurately capture the values from checkboxes and dropdown selections to ensure the correct data is displayed. Assistance is needed in this

Issue with grid element not properly scaling using the transform:scale property

Error Encountered in jQuery UI SelectMenu

evolving the design of mui stepper

Finding the current HTML page URL in Ionic 2: A step-by-step guide

Select a specific element to apply a CSS selector for a button

Identifying a change in the source location of an iframe element

Refresh the data using the Ajax function