Change class of list of li elements - javascript

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

Related

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.

JQuery hover toggle related selector

I have a list of images and separate list where each item is related to an image. Is it possible to have a hover event that fades the related image in and out using JQuery? I.e. when you hover over listid-1, image-1 fades in.
This is the best I could do:
$(document).ready(function(){
$( ".options li" ).hover(function( event ) {
$('.image-' + (this - ".listid")).toggleFade( "300" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg'>
<img class='image-2' src='2.jpg'>
<img class='image-3' src='3.jpg'>
<img class='image-4' src='4.jpg'>
<img class='image-5' src='5.jpg'>
</div>
<div class="options">
<nav>
<ul>
<li class='listid-1'>One</li>
<li class='listid-2'>Two</li>
<li class='listid-3'>Three</li>
<li class='listid-4'>Four</li>
<li class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>
You have a couple of issues. Firstly concatenating the this reference with a string isn't going to give you a valid selector. Secondly, the method name is fadeToggle(), not toggleFade().
To fix the problems you could first group the li and img elements by giving them all the same respective classes, then relate the hovered li to the img by their indexes, something like this:
$(document).ready(function() {
$(".options .listid").hover(function(event) {
$('.image').eq($(this).index()).fadeToggle("300");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image' src='1.jpg'>
<img class='image' src='2.jpg'>
<img class='image' src='3.jpg'>
<img class='image' src='4.jpg'>
<img class='image' src='5.jpg'>
</div>
<div class="options">
<nav>
<ul>
<li class='listid'>One</li>
<li class='listid'>Two</li>
<li class='listid'>Three</li>
<li class='listid'>Four</li>
<li class='listid'>Five</li>
</ul>
</nav>
</div>
</div>
You can get class of current li and split at - to get number and use it as selector for image.
$('img').hide()
$(".options li").hover(function() {
$('.image-' + ($(this).attr('class').split('-')[1])).fadeToggle("300");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg' alt="1">
<img class='image-2' src='2.jpg' alt="2">
<img class='image-3' src='3.jpg' alt="3">
<img class='image-4' src='4.jpg' alt="4">
<img class='image-5' src='5.jpg' alt="5">
</div>
<div class="options">
<nav>
<ul>
<li class='listid-1'>One</li>
<li class='listid-2'>Two</li>
<li class='listid-3'>Three</li>
<li class='listid-4'>Four</li>
<li class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>
If you have multiple classes on images instead you can use data attributes to select images.
$('img').hide()
$(".options li").hover(function() {
$('img.image-' + $(this).data('img')).fadeToggle(300)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg' alt="1">
<img class='image-2' src='2.jpg' alt="2">
<img class='image-3' src='3.jpg' alt="3">
<img class='image-4' src='4.jpg' alt="4">
<img class='image-5' src='5.jpg' alt="5">
</div>
<div class="options">
<nav>
<ul>
<li data-img="1" class='listid-1'>One</li>
<li data-img="2" class='listid-2'>Two</li>
<li data-img="3" class='listid-3'>Three</li>
<li data-img="4" class='listid-4'>Four</li>
<li data-img="5" class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>

Search Items using jquery

I'm trying to create a search using jQuery
$(function() {
var opts = $('#content li').map(function() {
return [[this.value, $(this).text()]];
});
$('#someinput').keyup(function(){
var rxp = new RegExp($('#someinput').val(), 'i');
var content = $('#content').empty();
opts.each(function() {
if (rxp.test(this[1])) {
content.append($('</li>').attr('value', this[0]).text(this[1]));
}
});
});
});
<input type="text" id="someinput" placeholder="Search" name="search" >
<section id="content">
<ul id="newSonglist">
<!-- items here -->
</ul>
</section>
Items look like this:
<li onclick="myControl.selectList(this,1)">
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Chris Brown Grass Aint Greener
<p>Sent by Nikan</p>
</div>
</li>
When I search Chris Brown it will remove all of the contents and it does not exclude the Chris Brown. Can you guys help me make it work? Thanks.
Your code works fine except for your new li creation. You are creating the li element using $('</li>') instead of $('<li>') (Note the /)
// You wrote </li> instead of <li>
content.append($('<li>').attr('value', this[0]).text(this[1]));
See this fiddle
I'm not very sure if I got what you trying to do, however for a simple JavaScript search UI, I'd rather do something more in the following fashion:
$(function() {
$("#someinput").on("keyup", function() {
var search_string = $(this).val()
var criteria = new RegExp(search_string, "i");
$("#content li").each(function() {
var li_element = $(this);
var filtered_out = li_element.text().match(criteria) == null && search_string.length > 0
if (filtered_out) {
li_element.hide();
} else {
li_element.show();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="someinput" placeholder="Search" name="search">
<section id="content">
<ul id="newSonglist">
<!-- items here -->
</ul>
<li>
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Chris Brown Grass Aint Greener
<p>Sent by Nikan</p>
</div>
</li>
<li>
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Jack Johnson
<p>Sent by Nikan</p>
</div>
</li>
<li>
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Aguillera
<p>Sent by Nikan</p>
</div>
</li>
</section>

Appending an anchor to every list item in an unordered list - Javascript

I'm struggling to get my syntax correct to correctly append an anchor inside a list item with the structure I'm working with.
The structure that I have to append into is below;
CURRENT OUTPUT
<ul class="q_circles_holder five_columns no_line">
<li class="q_circle_outer">
<a href="/the-potential-centre" target="_self">
<img src="/test.img">
</a>
<div class="q_circle_text_holder">
<h3 class="q_circle_title" style="">The Header Text</h3>
</div>
</li>
</ul>
I need to create a function that will loop through every list item inside the un-ordered list and place an anchor link (using the already stated href ) So ideally my desired output would then read -
DESIRED OUTPUT
<ul class="q_circles_holder five_columns no_line">
<li class="q_circle_outer">
<a href="/the-potential-centre" target="_self">
<img src="/test.img">
</a>
<div class="q_circle_text_holder">
<h3 class="q_circle_title" style="">The Header Text</h3>
Learn More
</div>
</li>
</ul>
I have this currently, but its not working correctly
NOT WORKING CODE -
$('.q_circles_holder').find('li').each(function(idx) {
var $this = $(this),
str = '<a class="learn-more" target="_self" href="' + $this.find('a').attr('href') + '">Learn More</a>';
$this.append(str);
});
Any help would be greatly appreciated.
Thanks,
D
$('.q_circles_holder').find('li').each(function() {
var $this = $(this);
var href = $this.find('a:eq(0)').attr('href');
$this.find('h3').after("<a href='"+href+"' target='_self'>Learn More</a>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="q_circles_holder five_columns no_line">
<li class="q_circle_outer">
<a href="/the-potential-centre" target="_self">
<img src="/test.img">
</a>
<div class="q_circle_text_holder">
<h3 class="q_circle_title" style="">The Header Text</h3>
</div>
</li>
</ul>
Replace $this.append(str) with $this.find('.q_circle_text_holder').append(str)
Here we go. Working fiddle here: https://jsfiddle.net/sjpszy4e/.
Javascript
$('.q_circles_holder').find('li').each(function() {
$(this).append('<a class="learn-more" target="_self" href="' + $(this).find('a').attr('href') + '">Learn More</a>');
});
HTML
<ul class="q_circles_holder five_columns no_line">
<li class="q_circle_outer">
<a href="/the-potential-centre" target="_self">
<img src="/test.img">
</a>
<div class="q_circle_text_holder">
<h3 class="q_circle_title" style="">The Header Text</h3>
</div>
</li>
<li class="q_circle_outer">
<a href="/the-potential-centre2" target="_self">
<img src="/test.img">
</a>
<div class="q_circle_text_holder">
<h3 class="q_circle_title" style="">The Header Text 2</h3>
</div>
</li>
</ul>

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");
};
});
});

Categories