I have a simple code which cycles through list elements adding and removing class "active".
This code works great but only for first list element. What I would like it to do is to apply this same function to all lists with class "imageslider".
Any help is appreciated!
Here's the js code:
<script>
toggleSlide = function(){
$(".imageslider li.active").removeClass()
.next().add(".imageslider li:first").last().addClass("active");
}
setInterval(toggleSlide, 500);
</script>
And here's is my HTML markup:
//First list
<ul class="imageslider">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
//Second list
<ul class="imageslider">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
Try
toggleSlide = function () {
$(".imageslider").each(function () {
$(this).find("li.active").removeClass()
.next().add($(this).children().first()).last().addClass("active");
})
}
setInterval(toggleSlide, 500);
Demo: Fiddle
Remove the :first predicate!
.next().add(".imageslider li").last().addClass("active");
Related
I have 8 li elements with each having value from 1 to 8.
<ul>
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
<li class="even">8</li>
</ul>
I want to insert li with text 'I am above x' above every li with even value. The desired li should look like
<ul>
<li>1</li>
<li>This is above 2</li>
<li class="even">2</li>
<li>3</li>
<li>This is above 4</li>
<li class="even">4</li>
<li>5</li>
<li>This is above 6</li>
<li class="even">6</li>
<li>7</li>
<li>This is above 8</li>
<li class="even">8</li>
</ul>
This can't be hardcoded as i have simplified the problem. Actually i want to dynamically add html above specific li elements.
I tried using .insertBefore() but this is not working.
("<li>x</li>").insertBefore$('#listing li.even');
You can use :nth-child() selector like this.
$('li:nth-child(even)').each(function() {
var num = $(this).text();
$(this).before('<li> This is before '+ num +'</li>');
})
$('li:nth-child(even)').each(function() {
var num = $(this).text();
$(this).before('<li> This is before ' + num + '</li>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
<li class="even">8</li>
</ul>
Use :even selector that select element has even index and use .before( function ) to insert html before selected element. .before() is a good alternative instead .each() if you want to insert html in loop.
$("li:gt(0):even").before(function(i, text){
return "<li>This is above " + text + "</li>";
});
$("li:gt(0):even").before(function(i, text){
return "<li>This is above " + text + "</li>";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
<li class="even">8</li>
</ul>
Yikes, it's because the syntax is way off.
$("<li>x</li>").insertBefore($('#listing li.even'));
The $ in the beginning is just a shorthand for jQuery's wrapping function, which returns a jQuery object. Without it, you are trying to call insertBefore on a string value "<li>x</li>". Strings don't have the insertBefore function, jQuery objects do.
Also, you have insertBefore$('...'). insertBefore is a function, insertBefore$ is not. You are trying to call insertBefore$ on a string, but what you really want is to call insertBefore on a jQuery object.
Also, technically in the provided fiddle #listing doesn't exist, but I kept in it because I assume it exists on the page in question?
$(document).ready(function () {
$.each($("#listid").find("li:odd"), function () {
$(this).before("<li>This is above " + $(this).text() + "</li>");
});
});
Working code: https://jsfiddle.net/n3tzf2pd/7/
try this
<html>
<script>
function generate(num) {
var text = "<ul>";
for (var i = 0; i < num; i++) {
text += "<li>text: " + i + "</li>";
}
text += "<ul>";
var div = document.getElementById("your_div");
div.innerHTML = text;
}
</script>
<body>
<div id="your_div"></div>
<input type="button" onclick="generate(8)" value="Generate" />
</body>
</html>
I'm trying to get all visible elements from list, but I can't find the way.
I have list
<ul id="posts">
<li style="display:none">1</li>
<li style="display:none">2</li>
<li>3</li>
<li style="display:none">4</li>
<li>5</li>
<li style="display:none">6</li>
<li>7</li>
<li>8</li>
</ul>
and I want to get every second visible element and add class "visible" to it.
I want this result
<ul id="posts">
<li style="display:none">1</li>
<li style="display:none">2</li>
<li>3</li>
<li style="display:none">4</li>
<li class="visible">5</li>
<li style="display:none">6</li>
<li>7</li>
<li class="visible">8</li>
</ul>
I tried something like this
var jQuerylistItems = jQuery('#posts').children('li');
jQuerylistItems.filter(':visible').addClass('visible');
and it works, but not right, somethimes add class, sometimes not, I'm not sure why.
Can somebody help me please?
Thanks
I would suggest using something like the following:
jQuery('#posts > li:visible:odd').addClass('visible');
Checkout out the demo here.
you can try .each();
$(document).ready(function(){
$('ul > li').each(function(){
if($(this).is(':visible')){
$(this).addClass('visible');
}
});
});
Demo
Here's solution for you. And also demo on fiddle
(function() {
'use-strict';
var el = document.getElementsByTagName('li');
for(var i=0;i<el.length;i++) {
if(!el[i].style.display && i%2 !== 0) {
el[i].className = 'visible';
}
}
}());
Modify the addClass() to use a callback and the first argument of callback is index
jQuerylistItems.filter(':visible').addClass(function(i) {
return i % 2 == 1 ? 'visible' : null;
});
My understanding is only add this class to every other visible element.
You will also need to remove this class before running it again which could be the part of the problem you are encountering
DEMO
Here's one solution: http://jsfiddle.net/5op0wzv9/.
$('ul > li:visible').each(function(index){
$(this).addClass(index % 2 === 1 ? "visible" : "");
});
I dont know if this is what you want, but here you go!!. Hope it helps.
<!DOCTYPE html>
<html lang = 'es'>
<head>
<title> MY TEST </title>
<meta charset = 'utf-8'>
</head>
<body>
<ul id="posts">
<li style="display:none">1</li>
<li style="display:none">2</li>
<li>3</li>
<li style="display:none">4</li>
<li>5</li>
<li style="display:none">6</li>
<li>7</li>
<li>8</li>
</ul>
<script>
var visibleElements = [];
var allListElements = document.getElementsByTagName('li'); // Get the reference to al the "li" elements
var index;
// Check for each element in array if his display its diferent to "none", if true, add that element to the array "visibleElements"
for (index = 0; index < allListElements.length; index++){
if(allListElements[index].style.display != 'none'){
visibleElements.push(allListElements[index]);
}
};
//Adding the class
for (var index2 in visibleElements){
visibleElements[index2].className = 'visible';
console.log('VISIBLE') // Check if adding the class name is working, if console shows 4 "VISIBLE" then its OK.
}
</script>
</body>
</html>
I have problems with creating a dropdown menu with jQuery.
This code shows the sub menus on hover but I couldn't get the sub sub menu to work too
$(document).ready(function() {
$("li").has(".sub").hover(function() {
$(this).find(".sub").toggle();
});
});
Here's the JS code
http://codepen.io/anon/pen/rVmabP
Lose the sub-sub class and use the immediate descendant selector to help you:
HTML
<ul id="nav">
<li>11111
<ul class="sub">
<li>2</li>
</ul>
</li>
<li>11111
<ul class="sub">
<li>2</li>
<li>22222
<ul class="sub">
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
$(document).ready(function() {
$("li").has("> .sub").hover(function() {
$(this).find("> .sub").stop().slideToggle();
});
});
JSFiddle
Note that this would work for unlimited nested .subs.
I use this javascript to produce "toggle" an extra word on class name by expanding DropDown function functionality and drop it when clicked:
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
/* event.stopPropagation();*/
return false;
});
}
}
$(function () {
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown').removeClass('active');
});
});
HTML in which I want JavaScript to make effect looks like,
(I'm targeting class="wrapper-dropdown") :
<div class="wrapper">
<div id='dd' class="wrapper-dropdown">1'st subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id='dd' class="wrapper-dropdown">2'nd subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
</ul>
</div>
<div id='dd' class="wrapper-dropdown">3'rd subject
<ul class="dropdown"></ul>
</div>
<div id='dd' class="wrapper-dropdown">4'th subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
The problem is that JavaScript makes effect only on the first item in wrapper div
Because you have multiple divs with id='dd' - ID's need to be unique.
Just add a dd class to your div like so:
<div class="wrapper-dropdown dd">1'st subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
And change the el: var dd = new DropDown($('.dd'));
I'm trying to get the following to behave so that when one of the filter-name list items are clicked it shows the ul below it (all ul's with .filter-options are hidden by default) and hides any other ul list that is open. Clicking again on the same filter-name list item would hide that ul as well. Also it would be brilliant if you clicked anywhere else that all of the ul's (.filter-options) would hide.
<ul class="all-filters" id="narrow-by-list">
<li class="filter-name" id="Colour-filter">Colour
<ul class="filter-options" id="Colour-options-list">
<li>Black</li>
<li>Red</li>
<li>Green</li>
</ul>
<li>
<li class="filter-name" id="Material-filter">Material
<ul class="filter-options" id="Material-options-list">
<li>Glass</li>
<li>Wax</li>
<li>Resin</li>
</ul>
</li>
<li class="filter-name" id="Size-filter">Material
<ul class="filter-options" id="Size-options-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
Here is my current jQuery that some what works...
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#narrow-by-list .filter-name').click(function(event) {
jQuery('ul.filter-options').not('> ul', this).hide("fast");
jQuery('ul.filter-options', this).toggle("fast");
event.stopPropagation();
});
});
Thanks for the help in advance!
You have html errors (you put open tags instead of close tags and forgot to close your ul's, that's mainly why nothing was working), here's the corrected version:
<ul class="all-filters" id="narrow-by-list">
<li class="filter-name" id="Colour-filter">Colour
<ul class="filter-options" id="Colour-options-list">
<li>Black</li>
<li>Red</li>
<li>Green</li></ul>
</li>
<li class="filter-name" id="Material-filter">Material
<ul class="filter-options" id="Material-options-list">
<li>Glass</li>
<li>Wax</li>
<li>Resin</li></ul>
</li>
<li class="filter-name" id="Size-filter">Material
<ul class="filter-options" id="Size-options-list">
<li>1</li>
<li>2</li>
<li>3</li></ul>
</li>
</ul>
And here's the js that works:
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('#narrow-by-list .filter-name').click(function(event) {
jQuery(this).find('ul.filter-options').toggle("fast").end().siblings().find('ul').hide('fast');
event.stopPropagation();
});
});
Check out the fiddle here. It finds the filter options within the this context, shows them, goes to its siblings and hides the list within them.
Try this - DEMO
$("li.filter-name").on("click", function() {
if ( $("ul", this).is(":visible") ) {
$("ul", this).slideUp("fast");
} else {
$("li.filter-name ul").slideUp("fast");
$("ul", this).slideDown("fast");
}
});
$("body").on("click", function(e) {
if ( !$(e.target).is("li") ) {
$("li.filter-name ul").slideUp("fast");
}
});
you have got some html missing declarations, i corrected them and changed your jQuery way:
here is demo
jQuery:
$(document).ready(function(){
$('.filter-options').slideUp('fast');//hide all filters at the begining
//you can use fast/slow or time declarations with miliseconds
$('#narrow-by-list .filter-name').click(function() {
$('.filter-options').slideUp(500);//hide all filters
$(this).children('.filter-options').slideDown(500);//show clicked ele's filters
//you can use other animations instead of slideUp/Down, like fadeIn() and fadeOut(), or pure hide() / show()
});
});
and note that $ === jQuery
html:
<ul class="all-filters" id="narrow-by-list">
<li class="filter-name" id="Colour-filter">Colour
<ul class="filter-options" id="Colour-options-list">
<li>Black</li>
<li>Red</li>
<li>Green</li>
</ul>
<li>
<li class="filter-name" id="Material-filter">Material
<ul class="filter-options" id="Material-options-list">
<li>Glass</li>
<li>Wax</li>
<li>Resin</li>
</ul>
</li>
<li class="filter-name" id="Size-filter">Numbers
<ul class="filter-options" id="Size-options-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>