I have two seperate lists and each of the list should add class active. Here is my HTML:
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
CSS
.active {
color: red;
}
JavaSript
$(document).ready(function () {
$("[id^='list'] .item").first().addClass("active");
});
As you can see only the #list1's first item getting the active class. How can i achive give the both list's first item active class.
Here is the fiddle: https://jsfiddle.net/iCromwell/rkvzhebd/1/
Try looping over the parent, and then target first .item
$(document).ready(function () {
$("[id^='list']").each(function(){
$(this).find('.item').first().addClass("active");
});
});
Fiddle
You have to loop through the list, the way you are approaching it, the class objects are being stacked in one selection list, and the first() is setting class to the first one only:
$(document).ready(function () {
$("[id^='list']").each(function(){
$(this).find('.item').first().addClass("active");
})
});
https://jsfiddle.net/rkvzhebd/4/
You can use jQuery first-child filter, such as:
$("ul li:first-child").addClass("active");
:first or .first() looks for first element in the matched set. So, that is functioning correctly. While in your case you need to target all the first child elements in the matched parents.
Use :first-child pseudoselector instead:
$('[id^="list"] .item:first-child').addClass('active');
.active{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
first() filter your result and return only first element - so only one element is selected. Use :first-child pseudo selector to achieve result.
$(document).ready(function () {
$("[id^='list'] .item:first-child").addClass("active");
});
$(document).ready(function () {
$("[id^='list'] .item:first-child").addClass("active");
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
You can use $("[id^='list']").find('.item:first').addClass("active");
Explanation:
$("[id^='list']") will return a list of uls
Then in this list, you can search using .find. Since you only need first element, add :first selector
Add class to all elements fetched
$(document).ready(function() {
$("[id^='list']").find('.item:first').addClass("active");
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
Consider using this code below:
$(document).ready(function () {
$('[id^="list"]').each(function(){
$(this).find('.item').first().addClass('active');
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
You can use first-child selector on each ul instead of id^=list
$("ul li:first-child").addClass("active");
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
Use this:
$(document).ready(function () {
$("ul[id^='list'] :first-child").addClass("active");
});
Fiddle here:
https://jsfiddle.net/mxautp3L/
If you want to do it with javascript you can do it like this,
Here, we are selecting both the list ul tag $("[id^='list']") which returns an array of both list now we can iterate over the array using jquery each() tag which call the function sent in argument with the this attribute pointing to the each item in the array.
Now, we can add the class .active by simply doing $(this).find('item').first().addclass('active');
$(document).ready(function () {
$('[id^="list"]').each(function(){
$(this).find('.item').first().addClass('active');
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
link to fiddle
The whole thing can be done without javascript and using only css as follows
ul[id^='list'] :first-child {
color: red;
}
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
link to fiddle
Related
I have 2 list element
<div id="list-one">
<ul class="ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
Can ul-two list element order follow ul-one order when I sort ul-one using jQuery Sortable ?
I want get the result like
<div id="list-one">
<ul class="ul-one">
<li data-order="2">item 2</li>
<li data-order="1">item 1</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="2">item 5</li>
<li data-order="1">item 4</li>
<li data-order="3">item 6</li>
</ul>
</div>
just drag ul-one element
Thanks for the answer
Sorry for misunderstand the question.
This is a working solution. I added id tag to easy call
http://jsfiddle.net/39ZvN/1141/
Try this
<div id="list-one">
<ul class="sort ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="sort ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
$( '.sort li' ).each(function() {
var position = $(this).data('order');
$(this).siblings().eq(position+1).after(this);
});
I using isotope to filter data.
Currently, I have an HTML with the struct like:
jQuery('.container-filter-cate').isotope({
itemSelector: '.list-posts',
filter: ':nth-child(-n+3)'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<ul>
<li>All Item</li>
<li>Sport</li>
<li>Cinema</li>
<li>Music</li>
</ul>
<div class="container-filter-cate">
<ul class="list-posts sport">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
</ul>
<ul class="list-posts cinema">
<li>Text 5</li>
<li>Text 6</li>
</ul>
<ul class="list-posts music">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
</div>
I want it should be filtered with <li> tag instead of ul like current.
I tried to with:
filter: 'ul.list-posts li:nth-child(-n+2)'
but it's not working.
Edited: my fiddle at here
My purpose is using filter to limit item to show.
You can change values of filter: ':nth-child(-n+3)' to see more information.
When I change to values of filter: ':nth-child(-n+2)' the result will be shown: first and second ul.
If first ul contain 5 items, second ul contain 40 items, it also shows 45 items.
Will fail because I only want 2 item to appear, not all items of two ul.
Check this,
HTML CODE,
<ul id='oiso'>
<li>All Item</li>
<li>sport</li>
<li>cinema</li>
<li>music</li>
</ul>
<div class="container-filter-cate">
<ul class="list-posts sport">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
</ul>
<ul class="list-posts cinema">
<li>Text 5</li>
<li>Text 6</li>
</ul>
<ul class="list-posts music">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
</div>
JS CODE
$(document).ready(function() {
var $container = $('.list-posts');
$container.isotope({});
$('#oiso li a').on('click', function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: $(selector).find("li")
});
return false;
});
})
For more details once visit jsfiddle link
I have a list of li items whose categories have been added to the class. 1 means it is associated with that category, 0 means it is not. When first visiting the page, they will all appear "View All". Clicking "Fruits" will show all items that have "fruits-1" in them. Clicking "View All" will show ALL items.
Filter by:
<ul>
<li>View All</li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Desserts & Cakes</li>
</ul>
<ul>
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>
What should I do to these items (add classes or ID's or whatever) to make it so when I click a category, only the ones that belong to that category appear? and the rest are hidden?
Try this : you can use text of clicked anchor to find matching categories and show them. see below code
$(function(){
$('ul li a').click(function(e){
e.preventDefault();
var category = $(this).text().toLowerCase().split("&");
if(category[0]=="view all")
{
$('ul.category li').show();
}
else
{
//hide all categories
$('ul.category li').hide();
$.each(category, function(i, v){
$('ul.category li.'+v.trim()+"-1").show();
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>View All</li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Desserts & Cakes</li>
</ul>
<ul class="category">
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>
$('.links li a').on('click',function(e){
e.preventDefault();
var className = $(this).text().toLowerCase();
$(".content li").not('.' + className).hide();
$(".content li" + "." + className).show();
})
.content li{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="links">
<li>Fruit </li>
<li>Veg </li>
<li>Nuts</li>
<li>Drinks</li>
</ul>
<ul class="content">
<li class="fruit veg nuts drinks">Product 1</li>
<li class="drinks">Product 2</li>
<li class="veg nuts drinks">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
Let say you have this
<ul class="listed-values">
<li class="fruit,veg,nuts,drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg,nuts,drink">Product 3</li>
<li class="veg,nuts">Product 4</li>
</ul>
and this one
<ul class="filter-ul">
<li>Fruit</li>
<li>Veg</li>
<li>Nuts</li>
<li>Drink</li>
</ul>
Here is jquery code
$(document).ready(function(){
$(".filter-ul li a").click(function(){
var text = $(this).text().toLowerCase();
$('ul.listed-values li').hide();
$('ul.listed-values li').filter(function(){
return $(this).attr('class').indexOf(text) != -1;
}).show();
})
})
Add a data-category attribute to each filter to indicate which category it should display. Then use that in a selector to match the class of the products.
The proper way to separate multiple classes is with spaces, not commas.
$("#filters a").click(function() {
var category = $(this).data("category");
$("#products li").hide();
$("#products li." + category).show();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="products">
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
Filter by:
<ul id="filters">
<li>Fruit
</li>
<li>Veg
</li>
<li>Nuts
</li>
<li>Drinks
</li>
</ul>
In html classes are separated with spaces not with comma.
html code:
<ul class="products">
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
<ul>
<li><a href="" class='category'>Fruit</a></li>
<li><a href="" class='category'>Veg</a></li>
<li><a href="" class='category'>Nuts</a></li>
<li><a href="" class='category'>Drinks</a></li>
</ul>
JS Code:
$(function() {
$(".category").on("click", function(e) {
e.preventDefault();
var products = $(".products").find("li");
products.show();
var cat = $(this).text();
products.not('.'+cat.toLowerCase()).hide();
});
});
You can find the working demo here : http://jsfiddle.net/crL054px/
Try this
JS Fiddle is here http://jsfiddle.net/cfzdq7f7/
HTML
<ul>
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
<ul>
<li class="category">Fruit</li>
<li class="category">Veg</li>
<li class="category">Nuts</li>
<li class="category">Drinks</li>
</ul>
Javascript
$(document).ready(function() {
$(".category").click(function() {
if($(this).html() == "Fruit") {
$(".veg").hide();
$(".nuts").hide();
$(".drink").hide();
$(".fruit").show();
} else if($(this).html() == "Veg") {
$(".fruit").hide();
$(".nuts").hide();
$(".drink").hide();
$(".veg").show();
} else if($(this).html() == "Nuts") {
$(".fruit").hide();
$(".veg").hide();
$(".drink").hide();
$(".nuts").show();
} else if($(this).html() == "Drinks") {
$(".fruit").hide();
$(".nuts").hide();
$(".veg").hide();
$(".drink").show();
}
});
});
CSS
.fruit, .veg, .nuts, .drink {
display:none;
}
.category {
cursor:pointer;
}
Let me know if it is helpful
I have a navigation menu that contains a bunch of li tags and some of them having this class "sub-item" and I want to group those li tags inside a ul so my navigation which is like this :
<ul class='main-menu'>
<li>Home</li>
<li>Pages</li>
<li class='sub-item'>_Contact Us</li>
<li class='sub-item'>_Community</li>
<li class='sub-item'>_About Me</li>
<li class='sub-item'>_Blog</li>
<li>DropDown </li>
<li class='sub-item'>_Sub Menu 1</li>
<li class='sub-item'>_Sub Menu 2</li>
<li class='sub-item'>_Sub Menu 3</li>
<li class='sub-item'>_Sub Menu 4</li>
<li>Sign Out</li>
</ul>
Will become like this :
<ul id='main-menu'>
<li>Home</li>
<li>Pages</li>
<ul class="sub-menu">
<li class='sub-item'>_Contact Us</li>
<li class='sub-item'>_Community</li>
<li class='sub-item'>_About Me</li>
<li class='sub-item'>_Blog</li>
</ul>
<li>DropDown </li>
<ul class="sub-menu">
<li class='sub-item'>_Sub Menu 1</li>
<li class='sub-item'>_Sub Menu 2</li>
<li class='sub-item'>_Sub Menu 3</li>
<li class='sub-item'>_Sub Menu 4</li>
</ul>
<li>Sign Out</li>
</ul>
This is my attempt to do this but unfortunately it didn't worked :
$('.main-menu li a').each(function() {
var $this = $(this),
content = $this.text();
if (content.indexOf('_') != -1) {
$this.parent('li').addClass('sub-item');
}
});
$('.sub-item').wrapAll('<ul class="sub-menu"></ul>');
Here is a JsFiddle demo : http://jsfiddle.net/hc05fhxr/1/
The desired output given in your question is invalid as li can't have ul as its content.
I possible alternate is to add the new ul as a descendant of the previous anchor
$('li:not(.sub-item)').each(function() {
var $li = $(this),
$subs = $li.nextUntil(':not(.sub-item)');
if ($subs.length) {
$('<ul />', {
'class': 'sub-menu'
}).html($subs).appendTo($li);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class='main-menu'>
<li>Home</li>
<li>Pages</li>
<li class='sub-item'>Contact Us</li>
<li class='sub-item'>Community</li>
<li class='sub-item'>About Me</li>
<li class='sub-item'>Blog</li>
<li>DropDown </li>
<li class='sub-item'>Sub Menu 1</li>
<li class='sub-item'>Sub Menu 2</li>
<li class='sub-item'>Sub Menu 3</li>
<li class='sub-item'>Sub Menu 4</li>
<li>Sign Out</li>
</ul>
You should use a combination prev() and after()
$('.main-menu li').each(function(index, el) {
var el = $(el);
if (!el.hasClass("sub-item")) {
el.after($("<ul></ul>"));
} else {
el.prev("ul").append(el);
}
});
$('.main-menu ul:empty').remove()
Here is your fiddle updated:
http://jsfiddle.net/hc05fhxr/3/
I have a unordered list
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
I want the items to be displayed horizontal. The items with the left class on the left site and the others on the right site.
I want to use smartmenus, for this reason I need a unordered list.
Here is the plunkr: http://plnkr.co/edit/GhgAWHv78qerLDcKgKDm?p=preview
On the basis of my understanding from your post, this is your desired result
.left{float:left}
.right{float:right}
ul{list-style:none}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
You can use flex-box if you can have a "filler" element between left and right.
ul {
display: flex;
list-style: none;
}
.filler {
flex: 1 0 auto;
}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="filler"></li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
check out this pen: http://codepen.io/anon/pen/pJpBjq
and here is a guide to flex-box