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>
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 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");
My URLs look like this:
http://www.site.co.uk/en-us/aboutus/abgroup.aspx
http://www.site.co.uk/en-us/casestudies.aspx
Here is the menu HTML markup
<ul class="sf-menu">
<li class="first">Home</li>
<li class="">About Us</li>
<li class="">Case Studies</li>
</ul>
How can I read the URL and look for /aboutus/ and highlight that particular list item?
I would also like to do this with casestudies << this is different as it doesnt have a sub directory.
I would like to use jquery? I think i need to parse the URL? and then check for the words and then add a class or bold to the li ??
edit: i want to know what the URL in the browser is, it should match the check in the jquery and then make the li bold or add a class.
Simply:
$('a[href*="/aboutus/"]').css('color', 'red');
See the jsFiddle Example.
Update:
If you want to know if the current URL in the browser matches one of the links then use this:
$('a[href*="'+window.location.href+'"]').css('color', 'red');
Give each of your menu elements an ID:
<ul class="sf-menu">
<li class="first" id="home">Home</li>
<li class="" id="aboutus">About Us</li>
<li class="" id="casestudies">Case Studies</li>
</ul>
And use this jQuery:
$(function() {
var currentPage = window.location.href.split("/")[4]);
$(".sf-menu li")each(function() {
if($(this).attr("href").indexOf(currentPage) > -1) $(this).addClass("highlight");
});
}
Nothing too sophisticated about this approach:
$(document).ready(function() {
$("ul.sf-menu li a").each(function() {
if ($(this).attr('href').match(/aboutus/) && window.location.match(/aboutus/)) {
$(this).parent().addClass('aboutus-highlight');
}
if ($(this).attr('href').match(/casestudies/) && window.location.match(/casestudies/)) {
$(this).parent().addClass('casestudies-highlight');
}
});
});
<?php if ($_SERVER["SCRIPT_NAME"] == "/en-us/aboutus/abgroup.aspx") { //whatever } ?>
oh you want js, here:
<script style='text/javascript'>
function checkURL() {
if(window.location == "http://www.site.co.uk/en-us/aboutus/home.aspx") {
document.getElementById('home').style.background = "yellow";
} else if (window.location == "http://www.site.co.uk/en-us/aboutus/abgroup.aspx") {
document.getElementById('abgroup').style.background = "yellow";
} else {
document.getElementById('casestudies').style.background = "yellow";
}
}
</script>
<body onload='checkURL()'>
<ul class="sf-menu">
<li class="first" id='home'>Home</li>
<li class="" id='abgroup'>About Us</li>
<li class="" id='casestudies'>Case Studies</li>
</ul>
yep that works
If you want to highlight any page under /aboutus/ - that is, you don't have just this one page, but several, but you do want the about us menu item to highlight:
if(window.location.indexOf('aboutus') != -1){
$('.sf-menu a[href$="aboutus/abgroup.aspx"]).addClass('here');
}
Then do your styling:
.sf-menu .here { background: red; }
Or whatever else you want.
You don't need to parse the URL as the href should match it (based on your example), so just this should work.
$('a[href=' + window.location.toString() +']').parents('ul').eq(0).addClass('highlight');
I have a bunch of menu items in a list format like so
<ul class="menu unselectable">
<li class="group">
Group Title
<ul>
<li class="groupItem i0">item 0</li>
<li class="groupItem i1 over">item 1</li>
</ul>
</li>
<li class="group">
Another Group Title
<ul>
<li class="groupItem i2">item 2</li>
<li class="groupItem i1">item 1 (if I hover here, the others should too</li>
</ul>
</li>
</ul>
The idea is, if I hover on one item with class i1 then all i1 items should behave the same. So I thought of adding a class over to all i1 items when I hover on any of them like so.
$(".groupItem").hover(
function () {
$(this).addClass("over");
},
function () {
$(this).removeClass("over");
}
);
The problem is I can't think of a way to identify what item has just been hovered on aside from $(this). To remedy this I thought of adding i1 as an id to items, but different dom nodes shouldn't have the same id. My next idea was to add the attribute value to the li items but to no avail (when I did a quick test with $(this).val() kept returning 0 regardless of the value actually stored in the node.
Is there any way I can add an identifier so I can just say $(this).<someIdentifier> , and target all the dom nodes with that identifier?
you can add an attribute groupID="{id}" and then call $(this).attr('groupID')
Element.prototype.secondId = '';
and than
document.getElementById('id5').secondId = 13;
As this you just set on any element a new property which you can use as you wish but is just in javascript not in html.
I don't recommend adding false attributes to elements, and this will work even if data attributes are not well supported by the user's browser:
$(".groupItem").hover(
function () {
var className = this.className.split(' ')[1];
$('.' + className).addClass("over");
},
function () {
var className = this.className.split(' ')[1];
$('.' + className).removeClass("over");
}
);
NOTE: Requires that classes are always organized as you specified above. A safer way could be:
var className = $.trim(this.className.replace('groupItem',''));
$(this).filter('#selector')
Please, Try working below code as below once:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<style>
.menu{ display:inline;}
.menu li{ display:inline; float: left;width: 100px;}
.menu li ul{display:none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".group").hover(
function () {
$(this).find("ul").show();
},
function () {
$(this).find("ul").hide();
}
);
});
</script>
</head>
<body>
<ul class="menu">
<li class="group">
Group Title
<ul>
<li>GT 1</li>
<li>GT 2</li>
</ul>
</li>
<li class="group">
Trochlear Nerve
<ul>
<li>TN 1</li>
<li>TN 2</li>
</ul>
</li>
</ul>
</body>
</html>
I'm trying to break up an unordered list containing eight items into two lists, each containing four items.
I figured that .inserting closing and opening tags after the fourth list item should cut it:
if(i == 3) {
$(li).insert({
after: "</ul><ul>"
});
}
But Prototype gives me the <ul></ul> in the opposite order.
<ul>
<li />
<li />
<li />
<li />
<ul></ul>
<li />
<li />
<li />
<li />
</ul>
Is there a simple answer to this one?
Here's how I would do it
Html:
<div id="list">
<ul id="original">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
Javascript:
var ul = new Element('ul');
$$('#original li').each(function(li, index) {
if (index % 3 == 0 && index > 0) {
$('list').insert({
bottom: ul
});
ul = new Element('ul');
}
ul.insert({
bottom: li
});
});
$('list').insert({
bottom: ul
});
$('original').remove();
Look at a live example
Use JavaScript's MOD operator to see when you are on the first or 4th row. If you are, create the UL element and then add the LIs to this element.
Something like:
if ( i % 4 == 0 ) {
currentUl = new Element('ul');
$('li').appendChild(currentUl);
}
It doesn't work like that.
Create a new UL, and move the items to that List:
function moveToOtherList(item){
var myList = item.up('ul');
var next = myList.next('ul');
if(!next){
next = new Element('ul',{style:"margin-top:20px;"});
myList.insert({after:next});
}
next.insert({bottom:item});
}
$$('ul li').each(function(item, index){
if(index > 3){
moveToOtherList(item);
}
});
See this jsfiddle for a working example
I dont know in Prototype but in Jquery you can try this http://jsfiddle.net/nxapS/7/