We Keep Coding

how to use same jQuery function on multiple group of lists

I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.
Here is the html code:
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Here is the jQuery function:
$(document).ready(function() {
$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});
$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
});

You may reduce everything to only one event handler.
$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> ></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>

Your problem is coming from how you find the active image. There are presumably multiples, but you want to find the one related to whatever was clicked. Change lines like this:
$('img.active')
to something like:
$(this).closest("ul.results").find("img.active")
to get the img.active within the clicked ul.

Kill bxSlider on button click so it can be reloaded

I am using bxslider to create a somewhat customized thumbnail/slider element. Basically I have a simple grid of thumbnails and the intent is to have the slider open on the specific thumbnail image on click.
The issue I'm coming across is that the slider remains active after closing the slider window and I need it to stop/reset.
Scouring the internet led me to the function destroySlider(), but that is resulting the following error in the console:
Uncaught TypeError: $(...).bxSlider(...).destroySlider is not a
function
Any thoughts on how best to do this is appreciated, code below:
JS:
function removeSlider(a, b) {
$(a).click(function(){
$(b).removeClass("open-slide");
$('.bxslider').bxSlider().destroySlider();
});
}
$('.open-slider').on('click', function (e) {
var startingImg = $(this).data('starting-img');
var slideSection = $(this).data('slide-section');
e.preventDefault();
$('#' + slideSection).addClass('open-slide');
$('.bxslider').bxSlider({
startSlide: parseInt(startingImg)
});
removeSlider('.remove-port-item', '.slide-contain')
})
HTML:
<div class="row padding-md-bot">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<!-- slides -->
<section class="slide-container slide-contain clearfix" id="careers-slides">
<div class="item-control">
<button class="remove-port-item button-close-slide">X</button>
<ul class="bxslider">
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
</ul>
</div>
</section>

Referring to comment by #Chris G above ^:
Try storing the slider in a global variable when you create it:
mySlider = $('.bxslider').bxSlider({ .... Then call
myslider.destroySlider(); Edit: according to the docs on github, this
will do it.
I tried this earlier with no luck, but I figured out why and here is the correct code:
var slider = $('.bxslider').bxSlider();
function removeSlider(a, b) {
$(a).click(function(){
$(b).removeClass("open-slide");
slider.destroySlider();
});
}
$('.open-slider').on('click', function (e) {
var startingImg = $(this).data('starting-img');
var slideSection = $(this).data('slide-section');
e.preventDefault();
$('#' + slideSection).addClass('open-slide');
slider.reloadSlider({
startSlide: parseInt(startingImg)
})
removeSlider('.remove-port-item', '.slide-contain')
})
As Chris G points out, the ultimate solution is to move bxSlider to a global variable, but there was an extra step due to the fact that the click function for opening the slider is using a variable scoped to that function (startingImg). This was solved by running:
slider.reloadSlider({
startSlide: parseInt(startingImg)
})
UPDATE: This works if only using one set of slides in the markup. The minute I try to use multiple sets of slides, even though they have their own unique IDs, it breaks reloadSlider and destroySlider. I am still trying to work through this.

In order for the image clicks and X button to work regardless of the state, it needs to be checked, both when opening and closing the slider:
Demo:
var slider = {};
function removeSlider(a, b) {
$(a).click(function() {
$(b).removeClass("open-slide");
var slideSection = $(a).parent().parent().attr("id");
if (slider[slideSection]) {
slider[slideSection].destroySlider();
slider[slideSection] = null;
}
});
}
$('.open-slider').on('click', function(e) {
var startingImg = parseInt($(this).data('starting-img'));
var slideSection = $(this).data('slide-section');
e.preventDefault();
$('#' + slideSection).addClass('open-slide');
if (slider[slideSection]) slider[slideSection].goToSlide(startingImg);
else slider[slideSection] = $('.bxslider').bxSlider({
startSlide: startingImg
});
})
$(document).ready(function() {
removeSlider('.remove-port-item', '.slide-contain');
});
.open-slider img {
width: 100%;
height: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="row padding-md-bot">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<!-- slides -->
<section class="slide-container slide-contain clearfix" id="careers-slides">
<div class="item-control">
<button class="remove-port-item button-close-slide">X</button>
<ul class="bxslider">
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
</ul>
</div>
</section>
Edit: changed JS code to work for multiple groups of thumbs + slider.

Jquery search and display images based on class

I'd like to be able to search and display these based on the class attributes, such as "kitchen". I can't find anything on searching by the class, only text and such. Or if anyone has a recommendation on a better way to search and display images. Any help would be greatly appreciated.
<form id="live-search" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" />
<span id="filter-count"></span>
</fieldset>
</form>
<br/>
<br/>
<div id="gallery">
<div id="item" class="#1 Category-Home Home">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
<div id="item" class="#2 Category-Kitchen Kitchen">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
<div id="item">
<div class="#3 Category-Outdoors Outdoors">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
</div>
<div id="item" class="#4 Category-Sports Sports">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
</div>
$(document).ready(function() {
$("#filter").keyup(function() {
});
});
https://jsfiddle.net/sgrg4b06/

So first, thing, remove all the duplicate ID's all over the place. That will only cause headaches. ID's are unique identifiers. Second, see the below. Pretty well commented. It IS case sensitive.
// then, on entering text...
$("#filter").on("keyup", function() {
if ($(this).val().length > 0) {
// hide everything,
$(".item").hide();
// get the text in the input
var mySelector = $(this).val();
// show any class that contains the input
var myImgs = $("[class*='"+mySelector+"' i]");
myImgs.show();
} else {
$(".item").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" />
<span id="filter-count"></span>
</fieldset>
</form>
<br/>
<br/>
<div id="gallery">
<div id="image-1" class="item #1 Category-Home Home">
<a target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
<div id="image-2" class="item #2 Category-Kitchen Kitchen">
<a target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
<div id="image-3" class="item #3 Category-Outdoors Outdoors">
<a target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
</div>
<div id="image-4" class="item #4 Category-Sports Sports">
<a target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x150" />
</a>
</div>
Your comment about case insensitivity made me curious. If you google jquery attribute selector case insensitivity, there is a lot of cool stuff to be found. The most simple solution was to change the selector, as above -- note that there is now a
$("[class*='"+mySelector+"' i]")
The i on the tail of the selector indicates case insensitivity.
FURTHER CHANGES -- now, when the input has no value, all image divs are shown. And, by default, they're all visible.

I removed all id, but added classes into divs attr.
Below is working solution (case insensitive).
Also I changed Your images a little bit, for You can see difference.
$(document).ready(function() {
var images = $(".item") //contain all unfiltered images
$("#filter").on("change paste keyup", function(){
$.each(images, function(i, l){
$(l).hide();
}); //hide all images
searchValue = $("#filter").val(); //get entered value of input field
searchValueRE = new RegExp(searchValue, "i"); //convert search value into RegExp
output = $.grep(images, function (n) {return searchValueRE.test(n.className); }); //Returns array that matches input value
$.each(output, function(i, l){
$(l).show();
}); //show matched images
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" />
<span id="filter-count"></span>
</fieldset>
</form>
<br/>
<br/>
<div id="gallery">
<div class="item #1 Category-Home Home">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x151" />
</a>
</div>
<div class="item #2 Category-Kitchen Kitchen">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x152" />
</a>
</div>
<div class="item #3 Category-Outdoors Outdoors">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x153" />
</a>
</div>
<div class="item #4 Category-Sports Sports">
<a id="#image-link" target="_blank" a href="">
<img class="img_item"><img src="http://placehold.it/150x154" />
</a>
</div>
</div>

1) You have ids repeated, ids are unique, I have changed them to class
2) You have:
<img class="img_item"><img src="http://placehold.it/150x150" />
The first img tag doesn't contain and image, either change it to a div (dont forget to close it) or just remove it. (In below example i changed to div)
3) Rather than using a class it makes more sense to use the data attribute. I have added a data attribute to each .item.
4) Using jQuery, we can loop through each item and check if the data-category contains the value of the search field. If it doesn't we hide it.
5) If the search box is empty, we show everything.
Hope this helps.
$("#filter").keyup(function() {
filterString = $("#filter").val().toLowerCase();
if (filterString.length < 1) {
//alert("showing all");
$(".item").slideDown('slow');
} else {
$(".item").each(function() {
if ($(this).data("category").toLowerCase().indexOf(filterString) == -1) {
$(this).slideUp('slow');
} else {
$(this).slideDown('slow');
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" />
<span id="filter-count"></span>
</fieldset>
</form>
<br/>
<br/>
<div id="gallery">
<div class="item" data-category="Home">
<a class="#image-link" target="_blank" a href="">
<div class="img_item"><img src="http://placehold.it/150x150" /></div>
</a>
</div>
<div class="item" data-category="Kitchen">
<a class="#image-link" target="_blank" a href="">
<div class="img_item"><img src="http://placehold.it/150x150" /></div>
</a>
</div>
<div class="item" data-category="Outdoors">
<a class="#image-link" target="_blank" a href="">
<div class="img_item"><img src="http://placehold.it/150x150" /></div>
</a>
</div>
<div class="item" data-category="Sports">
<a class="#image-link" target="_blank" a href="">
<div class="img_item"><img src="http://placehold.it/150x150" /></div>
</a>
</div>
</div>

Change class of list of li elements

I tried for changing the class name of li with class each_feature to each_feature--display.On each click of load more I need to change class for next 3 li inside ul.
But the below javascript is not working for me. On load I called load_more.display_items() this also doesn't work.
Someone please help me to make this work
<div class="export">
<section class="container">
<h2> Components Identified by scanner</h2>
<ul class="components_features">
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<a class="link" onclick="load_more.show_more_items()">
<span >Load more ...</span>
</a>
<hr>
</section>
</div>
Javascript:
var load_more = {
el: $('.export .components_features'),
list_index: 3,
display_items: function() {
if((this.list_index + 3) > this.el.find('.each_feature').length) {
this.el.find('.each_feature').addClass('each_feature--display');
}
this.el.find('.each_feature:lt(' + this.list_index + ')').addClass('each_feature--display');
},
show_more_items: function() {
this.list_index += 3;
this.display_items();
}
}

Something like this? Made in pure JS. For the a tag, you might want to prevent default link action if you are going to put a href.
<html>
<head>
<style>
.feature{
display: none;
}
</style>
<script>
function loadMore(){
features = document.getElementsByClassName("feature");
if(features.length > 0){
var count = 0;
while(features.length && count < 3){
count++;
features[0].className = "featureDisplay";
}
}
}
</script>
</head>
<body>
<ul>
<li class="feature">
1
</li>
<li class="feature">
2
</li>
<li class="feature">
3
</li>
<li class="feature">
4
</li>
<li class="feature">
5
</li>
<li class="feature">
6
</li>
<a onclick="loadMore()">Load more ...</a>
</ul>
</body>
</html>
The problem with using a for loop is that the value returned is a node list list which is a live object and it messes up the array when you modify a class. Read more about it here: javascript changes one some class names

on the 'load more' do this
$(".each_feature").addClass('each_feature--display');
$(".each_feature--display").removeClass('each_feature');
Of course you will have to adapt the code

Get multiple images width in JS

I am using a JS slider with 5 slides each with an image and a caption. I want to add a class only in that image where width > 2xheight. Following is my JS code:
$(".slides img").each(function() {
var w = $("img.gallery").width();
var h = $("img.gallery").height() * 2;
if (w > h) {
$(this).addClass("auto");
};
});
Please help me to solve this problem. Thanks in advance,
Chirag.
Below is my HTML code:
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide1.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<center>
<div class="intro">
<h1 class="head">Incredible India | Tiffin</h1>
<p class="text">Use what you know about your users to determine whether the words
and phrases you plan to use are appropriate.</p>
</div>
</center>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide2.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide2.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide3.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide3.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide4.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide4.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/slide5.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Extra Wide Image</p>
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li><a class="prev" href="#"><img src="images/themes.png" alt="" title="" /></a></li>
<li><a class="next" href="#"><img src="images/themes.png" alt="" title="" /></a></li>
</ul>
</div>

Try this:
$(document).ready(function(){
$(".slides img").each(function(){
$(this).load(function(){
var w = $(this).width();
var h = $(this).height() *2;
if(w > h){
$(this).addClass("auto");
};
});
});
});

If the class "gallery" is actually significant here this might help, otherwise the other answers would work.
$(window).load(function(){
$(".slides img.gallery").each(function(){
if($(this).width() > ($(this).height()*2)) {
$(this).addClass("auto");
};
});
});