On my product lister tempalte, I've got some filters ul.current-filters li which show currently selected product attributes. On click, the filter buttons should disapear ul.current-filters li. On clicking the "clear filter" button .clear-current-filters, all filters should be removed. If there is only one filter remaining, it should be removed, along with the clear filter button.
HTML
<div class="product-filter-buttons-container">
<!-- Product Filter list -->
<ul class="current-filters">
<div class="clear-current-filters">Clear Filtersx</div>
<!-- Product Filter Attributes -->
<li>Nikex</li>
<li>Adidasx</li>
<li>£90 - £100x</li>
</ul>
</div>
JQuery - This is what I currently have, unfortunately it does not work as intended. How do I reference the delgated element? It seems as though $(this) references the initial ul.current-filters li
$(".product-filter-buttons-container").on("click", "ul.current-filters li", function(event) {
event.preventDefault();
var a = $(this);
if ((a.length) > 0) {
a.hide();
} else {
a.hide();
$(".clear-current-filters").hide();
}
});
Something like this:
$('.current-filters > li > a').click(function(e){
var $this = $(this),
clearAll = $this.parent('li').hasClass('clear-current-filters'),
lastOne = $('.current-filters > li ').length == 2;
if(clearAll || lastOne){
$this.closest('ul').empty();
}else{
$this.parent().remove();
}
});
For this:
<div class="product-filter-buttons-container">
<!-- Product Filter list -->
<ul class="current-filters">
<li class="clear-current-filters">
Clear Filtersx
</li>
<li>
Nikex
</li>
<li>
Adidasx
</li>
<li>
£90 - £100x
</li>
</ul>
</div>
See it work in this demo
Related
I made a process bar using jquery and it is clickable also.But i want that if i was in second process bar then it can go only on previous bar by clicking on that and will not go to the next bar when i clicked.
Please see the jquery and tell me the condition for that.
jQuery('.nav-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = jQuery('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = jQuery('.nav-tabs > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
jQuery(this).parents('li').addClass('active');
//hide displaying tab content
jQuery(active_tab_selector).removeClass('active');
jQuery(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = jQuery(this).attr('href');
jQuery(target_tab_selector).removeClass('hide');
jQuery(target_tab_selector).addClass('active');
});
Here is the html:
<div class="mesre-tab">
<ul class="nav nav-tabs">
<li class="active collar_tab">
COLLAR
</li>
<li class="cuff_tab">
CUFF
</li>
<li class="pocket_tab">
POCKET
</li>
<li class="monogram_tab">
MONOGRAM
</li>
<li class="size_tab">
SIZE
</li>
</ul>
</div>
if anyone knows it, please help me out.
Thanks
I'm struggling with a jQuery live search.
First of all the live search update with the following code works.
//live search function
function live_search(list) {
$("#search")
.change( function () {
//getting search value
var searchtext = $(this).val();
if(searchtext) {
//finding If content matches with searck keyword
$matches = $(list).find('a:Contains(' + searchtext + ')').parent();
//hiding non matching lists
$('li', list).not($matches).slideUp();
//showing matching lists
$matches.slideDown();
} else {
//if search keyword is empty then display all the lists
$(list).find("li").slideDown(200);
}
return false;
})
.keyup( function () {
$(this).change();
});
}
The problem is that my list is alphabetically and containt an header for each letter:
<ul class="begrippen_list leftList col-sm-12 col-md-6">
<li class="header a">A</li>
<li class="a">
All
</li>
<li class="a">
Auto
</li>
<li class="header b">B</li>
<li class="b">
Balls
</li>
<li class="b">
Bus
</li>
</ul>
Now to the problem: when I type au in the input, the jQuery only shows the list-item with "Auto", but I also want the header with the class a (class of li) to be shown. When I only type a the headers with the class "a" and class "b" have to be shown.
I think to check all $matches for their class and displaying the li.header with classes of the $matches could be the solution but couldn't get it work.
Cheers!
You can traverse and find the $matches's 'header' element and exclude while sliding up.
var $header = $matches.prevAll('li.header');
//hiding non matching lists excluding matches heare
$('li', list).not($matches).not($header).slideUp();
I have this code http://jsfiddle.net/cwahL1tz/
My HTML
<ul class="myFilters">
<li data-type="A">A</li>
<li data-type="B">B</li>
<li data-type="C">C</li>
</ul>
<div class="filter">
<ul class="title">
<li>Assurance</li>
<li>Couverture</li>
<li>Banque</li>
<li>Alimentation</li>
</ul>
<div id="Assurance" class="category">
<ul>
<li>Groupama</li>
</ul>
</div>
<div id="Couverture" class="category">
<ul>
<li>Try it !</li>
</ul>
</div>
<div id="Alimentation" class="category">
<ul>
<li>AN example</li>
</ul>
</div>
</div>
Here's my JS script
jQuery(function ($) {
$('.myFilters li').click(function(){
$(".category").hide();
var v = $(this).text()[0]
$('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == v;
$(".category:first").show();
}).show()
})
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$(".category").hide();
$(selector).show();
});
});
It works fine but I trying to arrange some stuff but I'm stuck.
When I load the page all the links and divs appears, I just only want the divs of the first letter appear.
And when I click on C for example, I want the first div to show from the first link.
Thanks for your help !
EDITED:
On load:
$('.myFilters li:first').trigger('click');
And inside its click:
.first().find('a[data-toggle]:first').trigger('click');
jsfiddle DEMO
You can simply do that with first selecting the element with the right selector and then you can trigger the click event manually :
Show the Assurance content on load :
$('a[data-toggle="#Assurance"]').click();
Show first content on click :
$('.myFilters li').click(function(){
$(".category").hide();
var v = $(this).text()[0]
$('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == v;
}).show()
$('a[data-toggle]:visible:first').click();
})
Updated jsFiddle
Without going into any more javascript, you can display the content the way you would like using css selectors:
.category {display:none;}
.category:nth-of-type(1) {
display:block;
}
http://jsfiddle.net/5ageasm4/1/
Is this what you want. Check the Fiddle
I am basically just triggering the first item in the li
$(".title > li:first").find("a[data-toggle]").trigger("click");
and i am doing the same with the category.
EDIT
I updated my Fiddle
NEW EDIT
Created a new Fiddle, this one just removes all the duplicate code.
So basically i created these 2 functions
that.selectFirstElem = function(selector){
selector.find("a[data-toggle]").trigger("click");
};
that.loadFirstDataToggle = function(input){
return $('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == input;
}).show();
};
And those 2 functions you can just call in the places where you need it.
I have two lists which are sortable and then a button. The user adds items from the first list to the second list and then when they click the button I have some script collect the list item id's from the second list. This part works as intended.
My problem comes when the user accidentally adds an item to the second list that they want to remove. I have a trash can icon that works to removes the item from the list, but then when you hit the button to get the array, it still includes the deleted list item in the array. How do I avoid this? Should I be building the array as the items are added and removed, or is it OK to only build it once after they are done moving list items around like I have done here?
Thanks for taking a look!
http://jsfiddle.net/vYu5k/
<div class="avail_segments_wrap">
<ul id="available" class="segments_available">Available Segments
<li id="1"><span class="title">Item 1</span></li>
<li id="2"><span class="title">Item 2</span></li>
<li id="3"><span class="title">Item 3</span></li>
<li id="4"><span class="title">Item 4</span></li>
<li id="5"><span class="title">Item 5</span></li>
<li id="6"><span class="title">Item 6</span></li>
</ul>
</div>
<br>
<div class="chosen_segments_wrap">
<ul id="chosen" class="segments_chosen">Chosen Segments
</ul>
</div>
<button type="button" id="button1">Button1</button>
jquery:
//make lists sortable
$("#available").sortable({
connectWith: "#chosen"
});
$("#chosen").sortable({
connectWith: "#available"
});
//make add and trash icons functional
$('.ui-icon-add, .ui-icon-delete').on('click', function() {
item = $(this).parent();
item.fadeOut(function() {
if (item.parent().attr('id') == 'chosen') {
$('#available').remove(item.fadeIn());
} else {
$('#chosen').append(item.fadeIn());
}
});
});
//hit button to collect all li id's from ul "chosen".
$("#button1").click( function()
{
var chosenArray = [];
$('#chosen li').each(function(){
chosenArray.push($(this).attr('id'));
});
alert(chosenArray)
}
);
Fiddle Demo
$("#button1").click(function () {
var chosenArray = [];
$('#chosen li:visible').each(function () {
You are hiding the li on delete. But when you create array you are taking all li elements
you need to select only visible elements $('#chosen li:visible').
Read :visible
I want to display a message when the <section> is “empty”. Inside the <section>, I can have an unknown number of <ul> and inside it an unknown number of <li>. When I click on “x” button it removes that <li>. Here’s the HTML:
<section>
<ul>
<li class="row row--half-padding-top-bottom">
<span>October 2013</span>
</li>
<li class="notification notification--new">
<span>
<span>Franck Ribery</span>
<span>Bayern Munich</span>
</span>
<span class="accept-ignore-container">
<button class="js-animate-onclick--parent" title="Accept">Accept</button>
<button class="js-connect-invite--ignore">×</button>
</span>
</li>
<li class="notification notification--new">
<span>
<span>Arjen Robben</span>
<span>Bayern Munich</span>
</span>
<span class="accept-ignore-container">
<button class="js-animate-onclick--parent" title="Accept">Accept</button>
<button class="js-connect-invite--ignore">×</button>
</span>
</li>
</ul>
<ul>
<li class="row row--half-padding-top-bottom">
<span>September 2013</span>
</li>
<li class="notification notification--new">
<span>
<span>Franck Ribery</span>
<span>Bayern Munich</span>
</span>
<span class="accept-ignore-container">
<button class="js-animate-onclick--parent" title="Accept">Accept</button>
<button class="js-connect-invite--ignore">×</button>
</span>
</li>
</ul>
</section>
I want to ignore the <li> element that shows the date (hence the “empty”, because it’s not really empty). To do that, I check if the <li> has a class .notification. If it has, increase the counter. I do that upon clicking the “x” button that has a class .js-connect-invite--ignore:
var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
var ul = $(this).closest('section').children();
$(ul).each(function() {
var li = $(this).children();
counter = 0;
$(li).each(function() {
if ($(this).is('.notification')) {
console.log('yes');
counter ++;
}
})
})
console.log(counter);
})
See demo: http://jsfiddle.net/CCECK/
However, it’s not working properly as the logic is wrong. Do I need to add two counters?
How can upon clicking “x” check all the other elements and if that is the last <li class="notification"> display an alert? Thanks!
Basically you reset the counter within each ul, so you always end up with the number of li elements of the last ul, which is 1. So if you reset the counter before iterating all the ul elements and also remove the .notification element on clicking the button then you can figure out when only one has been left.
You can try the following,
http://jsfiddle.net/Gd2kS/
js
var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
var ul = $(this).closest('section').children();
counter = 0;
$(ul).each(function() {
var li = $(this).children();
$(li).each(function() {
if ($(this).is('.notification')) {
console.log('yes');
counter ++;
}
});
});
console.log(counter);
if(counter==1){
alert("last one left!!");
}else{
$(this).parents('.notification').remove();
}
})
EDIT - response to comments (hiding element with class .visuallyhidden instead of removing element)
var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
var ul = $(this).closest('section').children();
counter = 0;
$(ul).each(function() {
var li = $(this).children();
$(li).each(function() {
if ($(this).is('.notification')
&& !$(this).is('.visuallyhidden')) {/*<- modify the condition*/
console.log($(this));
console.log('yes');
counter ++;
}
});
});
console.log(counter);
if(counter==1){
alert("last one left!!");
}else{
/*modify the removal*/
//$(this).parents('.notification').remove();
$(this).parents('.notification').addClass("visuallyhidden");
}
})