jQuery load first 3 elements for multiple ul lists - javascript

This question has been asked long ago and answered as well here jQuery load first 3 elements, click “load more” to display next 5 elements, but that was for only one ul element.
However, I want to know how to do the same thing for multiple elements say I have this instead:
<ul id="myList"></ul>
<ul id="myList1"></ul>
<ul id="myList2"></ul>
how do I make the javascript for multiple elements in this case??
$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('#myList li:lt('+x+')').show();
$('#showLess').show();
if(x == size_li){
$('#loadMore').hide();
}
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').hide();
$('#loadMore').show();
$('#showLess').show();
if(x == 3){
$('#showLess').hide();
}
});
});
any idea how to do that??
Thanks
Update#1:
This is my other code part for showmore and showless
<div id="loadMore">Load more</div><div id="showLess">show Less</div>
Update#2
what if classes used instead of ids, would that make it easier?? like this:
<ul class="myList"></ul>
<ul class="myList"></ul>
<ul class="myList"></ul>
and each showmore/Less can control one of them. so one to one... is that possible???

You can change your code by using classes instead of ids and a wrapping div; than change accordingly the logic by using element nesting.
Instead of use a variable you can use a HTML attribute to store the current number of showed li for each ul.
Code:
$(document).ready(function () {
$(".wrapper").each(function (index) {
$(this).find('.myList li:lt(' + $(this).attr('viewChild') + ')').show();
});
$('.loadMore').click(function () {
var $myWrapper= $(this).closest('.wrapper');
var x= parseInt($myWrapper.attr('viewChild'),10);
var liSize=$myWrapper.find('.myList li').size();
x = (x + 5 <= liSize) ? x + 5 : liSize;
$myWrapper.attr('viewChild',x)
$myWrapper.find('.myList li:lt(' + x + ')').show();
$myWrapper.find('.showLess').show();
if (x == liSize) {
$myWrapper.find('.loadMore').hide();
}
});
$('.showLess').click(function () {
var $myWrapper= $(this).closest('.wrapper');
var x= $myWrapper.attr('viewChild')
x = (x - 5 < 0) ? 3 : x - 5;
$myWrapper.attr('viewChild',x)
$myWrapper.find('.myList li').not(':lt(' + x + ')').hide();
$myWrapper.find('.loadMore').show();
$myWrapper.find('.showLess').show();
if (x == 3) {
$myWrapper.find('.showLess').hide();
}
});
});
Demo: http://jsfiddle.net/9gxBT/

Related

Multiple this, use the first one

In my case, I have this in each(), I need to use that this from the begining, I know it's blur but you'll understand with the example
jQuery(document).ready(function () {
jQuery('.ids-attributes-wrapper').each(function(){
var size_li = jQuery(this).find('dd.ids-attr-content li.ids-sub-filters').length;
x=3;
jQuery(this).find('dd.ids-attr-content li.ids-sub-filters:gt('+x+')').hide().end().append(jQuery('<li class="ids-sub-filters more">...</li>'));
jQuery(this).find('dd.ids-attr-content li:lt('+x+')').show();
jQuery(this).find('#show-more').click(function () {
x= (x+50 <= size_li) ? x+50 : size_li;
jQuery(this).find('dd.ids-attr-content li:lt('+x+')').show();
//!!! HERE the above this 'jQuery(this)' doesn't refer to the .ids-attributes-wrapper each selector
jQuery(this).find('dd.ids-attr-content li.ids-sub-filters.more').remove();
});
jQuery(this).find('#show-less').click(function () {
if (!jQuery(this).find('dd.ids-attr-content li.ids-sub-filters').hasClass('more')) {
x = 5;
jQuery(this).find('dd.ids-attr-content li').not(':lt('+x+')').hide();
jQuery(this).find('dd.ids-attr-content li.ids-sub-filters:gt('+x+')').hide().end().append(jQuery('<li class="ids-sub-filters more">...</li>'));
}
});
});
});
this context problems in JavaScript are pretty common. I believe that what you are looking for is the following:
jQuery(document).ready(function () {
jQuery('.ids-attributes-wrapper').each(function(){
var size_li = jQuery(this).find('dd.ids-attr-content li.ids-sub-filters').length;
x=3;
jQuery(this).find('dd.ids-attr-content li.ids-sub-filters:gt('+x+')').hide().end().append(jQuery('<li class="ids-sub-filters more">...</li>'));
jQuery(this).find('dd.ids-attr-content li:lt('+x+')').show();
var self=this
jQuery(this).find('#show-more').click(function () {
x= (x+50 <= size_li) ? x+50 : size_li;
jQuery(self).find('dd.ids-attr-content li:lt('+x+')').show();
//!!! HERE the above this 'jQuery(this)' doesn't refer to the .ids-attributes-wrapper each selector
jQuery(this).find('dd.ids-attr-content li.ids-sub-filters.more').remove();
});
jQuery(this).find('#show-less').click(function () {
if (!jQuery(this).find('dd.ids-attr-content li.ids-sub-filters').hasClass('more')) {
x = 5;
jQuery(this).find('dd.ids-attr-content li').not(':lt('+x+')').hide();
jQuery(this).find('dd.ids-attr-content li.ids-sub-filters:gt('+x+')').hide().end().append(jQuery('<li class="ids-sub-filters more">...</li>'));
}
});
});
});
In this example, the context from the previous this is referenced by the new variable self. Also, JavaScript has a built in language feature to handle this. It's the bind function, but it's not used very often and the self method I have demonstrated here is more idiomatic.

List item fade when navigating

I have a group of list items that I control through "Next" and "Prev" buttons. The code shows five list items at a time, if there are more you can click "Next" and you'll see another five - if you click "Prev" you'll see the previous five...pretty simple operation and it works. You can see a live example at: http://joshrodg.com/hallmark/events/.
The javascript I am using is:
$(document).ready(function () {
var $li = $('.eo-events li');
$li.hide().filter(':lt(5)').show()
var x = 5;
$('#next, #prev').click(function () {
var m = this.id === 'prev' ? 'first' : 'last';
var $m = $li.filter(':visible')[m]()[this.id + 'All'](":lt(" + x + ")");
if ( $m.length == 0 ) return;
$li.hide();
$m.show();
});
});
http://jsfiddle.net/479Fr/
What I'd like to do is have the items fade-in instead of just appearing...kind of like: https://codepo8.github.io/simple-carousel/carousel-pointer-events.html (or something similar)
I know there are some carousels out there that can do this, but I don't need something that bulky, especially since the functionality already works with such a small amount of code.
Is there a simple modification I can make to what I'm already using to accomplish something like this?
Thanks,
Josh
Use the JQuery .fadein/out to have fading animations
http://api.jquery.com/fadein/
Like that :
$(document).ready(function () {
var $li = $('#myList li');
$li.hide().filter(':lt(5)').show()
var x = 5;
$('#next, #prev').click(function () {
var m = this.id === 'prev' ? 'first' : 'last';
var $m = $li.filter(':visible')[m]()[this.id + 'All'](":lt(" + x + ")");
if ( $m.length == 0 ) return;
var time = 250;
$li.fadeOut(time);
setTimeout( function(){
$m.fadeIn(time);
}, time);
});
});

Input value changing the display of divs

I'm trying to make a div dissapearing after a X value on the input, i can make the value changing when clicked on a div, but the div i want to hide, doesn't hide.. looks like it doesn't update when changing the value of the input.
$("#ticket-plus").on('click', function() {
$("#naenae").val( +$("#naenae").val() + 5 );
});
if ($("#naenae").val() == 10) {
$("#badge-one > div").hide();
}
$("#ticket-plus").on('click', function() {
$("#naenae").val( +$("#naenae").val() + 5 );
if ($("#naenae").val() == 10) {
$("#badge-one > div").hide();
}
});
use parseInt( befor adding the value
$("#ticket-plus").on('click', function() {
$("#naenae").val( parseInt($("#naenae").val()) + 5 );
});
You can try to use keyup() or keydown() event :
$("#naenae").keyup(function() {
if ($("#naenae").val() == 10) {
$("#badge-one > div").hide();
}
});
Html
<input type="text"/>
<div>Hide me</div>
jQuery
$('input').val(0);
$('input').on('click',function() {
var $input = $(this);
$input.val(parseInt($input.val()) + 5);
if($input.val() == 10) {
$('div').hide();
} else {
$('div').show();
}
});
Fiddle

menu traversing on next and prev button click

can any one optimize this code i am new to jquery .
i want add class on next and previous button click.any way i wrote this code it's working for me but if any one optimize this code using jquery predefined methods .then it will more helpful..
Thanks in advance
$(document).ready(function () {
var length = $('#slides li').size() - 1;
var curren = 0;
console.log(length);
$('.next').on('click', function () {
if (curren >= 0 && curren < length) {
curren++;
$('.selected').removeClass('selected');
$('#slides li:eq(' + curren + ')').addClass('selected');
}
});
$('.prev').on('click', function () {
if (curren >= 1) {
curren--;
$('.selected').removeClass('selected');
$('#slides li:eq(' + curren + ')').addClass('selected');
}
});
});
my html code
<ul id="slides">
<li class="selected">first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>five</li>
<li>six</li>
</ul>
You should have a look at $.next and $.prev.
Your code can easily be altered into something along these lines:
$(".next").on("click", function() {
var selected = $("#slides li.selected");
var next = selected.next();
if(next.length){next.addClass("selected");selected.removeClass("selected");}
});
$(".prev").on("click", function() {
var selected = $("#slides li.selected");
var prev = selected.prev();
if(prev.length){prev.addClass("selected");selected.removeClass("selected");}
});
Example can be found here: jsbin

FadeIn multiples of 6 divs at a time with click

I have this code below that basically gets a number of elements and stops them at 6 items. I have then got a button that when clicked loads in remaining divs.
I just want it to load in 6 divs at a time. Does anyone know the way forward to do this at all?
Here is the javascript:
function click_load() {
var count = 0;
var item = $('.newsmainimages');
//var itemClick = $('Load More');
$(item).each(function() {
if (++count == 6) {
$(this).parent().append('<div class="nextClick">Load More</div>');
}
else if (count > 6) {
$(this).css('display','none');
}
});
$('.nextClick a').click(function() {
$(item).each(function(item) {
$(this).delay(200*item).fadeIn("slow");
});
alert(item);
return false;
});
}
Cheers
You can use slice for this kind of things
DEMO
$(function(){
var count = 6;
showListItems(0 , count);
$('button').click(function() {
showListItems(0, ($('ul li:visible').length) + count);
});
function showListItems(firstNumber, lastNumber)
{
$('ul li').slice(firstNumber, lastNumber).fadeIn("slow");
}
});​

Categories