jQuery to show images in sequence in a div depending on their ID

Question

I am having total 10 images with ID's in a div. Now I want to show those images depending on arrow keypress in a specific sequence 1a, cv2, w3i, e4, re5, we6i, w7i, w8i, in, xxi irrespective of their position in div. Now, when the arrow press second time then it should show second image in that series. Also, if the image in the div are less than 10 suppose 4. Then also, they should show in the same sequence as they show, when there were 10 imges. Please look at my example,

$("img").hide();
//pressing arrow button first time
$(document).keydown(function(e) {
  if (e.which == 39) {
  //show 1a
  //if 1a does not exist, then show cv2
  //if 1a,cv2 does not exist, then show w3i
  //if 1a,cv2,w3i does not exist, then show e4
  //and so on.
  }
});

//pressing arrow button second time
$(document).keydown(function(e) {
  if (e.which == 39) {
  //show the second img in series after as first already shown in first press
  }
});

Vijay Hardaha · Answer

Your updated question is a bit confusing because you added in, xxi in which I don't see any number number-based logic will fail. However, I found your question interesting, So I tried it.

Here is my example, I am getting all the hidden images from the selector then I am mapping the selectors' ids and also extracting the number from ids and saving it as index then I am sorting by index. once sorting is done. I pop the first object mapped array and then I get the ID from the array and I use jquery to show that image ID.

(function($) {
  $('.img > img').hide();

  const showNext = ($el) => {
    const els = $($el + ' > img:not(:visible)');
    if (els.length) {
      const ids = els
        .map(function() {
          const id = this.id;
          return {
            id: id,
            index: id.replace(/[^0-9]/g, ''),
          };
        })
        .get()
        .sort((a, b) => a.index - b.index);

      $($el + ' > img#' + ids[0].id).show();
    }
  };

  //pressing arrow button first time
  $(document).keydown(function(e) {
    if (e.which == 39) {
      showNext('#first-container');
      showNext('#second-container');
    }
  });
})($);

.img {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 60px;
  counter: img;
}

.img img {
  max-width: 100%;
  height: auto;
  counter-increment: img;
}





  
  
  
  Document
  
  



  
    Press right arrow key to see the images

jQuery to show images in sequence in a div depending on their ID

1 Answers