jQuery检查是否 <li> cointains 2 img标签

Question

I would like to check if the single li tag cointains single or 2 img tags and run the jQuery script only if there are 2 img tags. Now when a single li contains only one image it disappear after click.

It should work follow:

1. On load - show first image, hide second image
2. On click - First image hide, show second image
3. Click on the Second image - Second image hide, show first image

 $(document).ready(function () { $("#list-of-images li img:first-child").click(function () { $(this).hide(); $(this).next().show(); }); $("list-of-images li img:nth-child(2)").click(function () { $(this).hide(); $(this).prev().show(); }); }); 

 #list-of-images li img:nth-child(2) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul id="list-of-images"> <li> <img src="https://cdn.infobeamer.com/s/6bd893/img/hosted-restaurant.png" /> <img src="https://cdn.infobeamer.com/s/e67487/img/hosted-your-usecase.png" /> </li> <li> <img src="https://cdn.infobeamer.com/s/6bd893/img/hosted-restaurant.png" /> <img src="https://cdn.infobeamer.com/s/e67487/img/hosted-your-usecase.png" /> </li> </ul> 

Answer 1

At first check the length image in clicked li .

Check if the length of next img is greater then 0 or not. If it is true show next else show previous image.

 $("#list-of-images li img").click(function () { if($(this).parent().find('img').length == 2) { $(this).hide(); if($(this).next('img').length> 0) $(this).next('img').show(); else $(this).prev('img').show(); } }); 

 #list-of-images li img:nth-child(2) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul id="list-of-images"> <li> <img src="https://cdn.infobeamer.com/s/6bd893/img/hosted-restaurant.png" /> <img src="https://cdn.infobeamer.com/s/e67487/img/hosted-your-usecase.png" /> </li> <li> <img src="https://cdn.infobeamer.com/s/6bd893/img/hosted-restaurant.png" /> <img src="https://cdn.infobeamer.com/s/e67487/img/hosted-your-usecase.png" /> </li> </ul>