Jquery Show div with matching class - javascript

I'm trying to display a div when an item with a class name the same as the hidden div's id is clicked.
The problem is when I click it reveals all of them instead of the particular one I'm clicking on.
This is my code so far:
$("#mixers").on("click", ".clear-tile", function() {
$("#mixers li").each(function() {
$('#' + $(this).attr('class')).removeClass('display-hide');
});
});
.display-hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="mixers">
<li class="one"><span class="clear-tile">Show One</span></li>
<li class="two"><span class="clear-tile">Show Two</span></li>
<li class="three"><span class="clear-tile">Show Three</span></li>
</ul>
<div id="one" class="display-hide"><p>I'm One</p></div>
<div id="two" class="display-hide"><p>I'm Two</p></div>
<div id="three" class="display-hide"><p>I'm Three</p></div>

Dont iterate over them with each, that will show them all
Use parent() to traverse up to the li with the class identifier
$("#mixers").on("click", ".clear-tile", function() {
$('#' + $(this).parent('li').attr('class')).removeClass('display-hide');
});
.display-hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="mixers">
<li class="one"><span class="clear-tile">Show One</span>
</li>
<li class="two"><span class="clear-tile">Show Two</span>
</li>
<li class="three"><span class="clear-tile">Show Three</span>
</li>
</ul>
<div id="one" class="display-hide">
<p>I'm One</p>
</div>
<div id="two" class="display-hide">
<p>I'm Two</p>
</div>
<div id="three" class="display-hide">
<p>I'm Three</p>
</div>

You need to use:
$("#mixers").on("click", ".clear-tile", function() {
$('#' + $(this).parent().attr('class'))
.toggleClass('display-hide')
.siblings('div')
.addClass('display-hide');
});
Working Demo

Related

How to set array or multiples var inside jquery .html() method?

I've got a array with content [a,b,c] and I need to put it inside a .html()
and my original place its 3 child
When i put it directly - this way:
$('#listProducts div ul li').html(newElements); (not esactly this code, but I short it)
whats happens (return like this [abc]):
<div id=listProducts>
<ul>
<li>A,B,C</li>
<li>A,B,C</li>
<li>A,B,C</li>
</ul></div>
result i want:
<div id=listProducts>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul></div>
I tried this:
$('#listProducts ul li ul li div').html(function(newElements){
for(let i = 0; i < newElements.length; i++){
newElements[i];
}
});
but i research about functions inside .html() and it seems only accept index parameters.
i think about something like
$().html(newElements[0],newElements[1],newElements[2]) or
separe in 3 variables $().html(element1,newElements2,newElements3) // but i guess its not possible with .html()
Is there a way to do that?
Ps: I cant change the HTML, and i cant just send directly someting like <li> + newElements[i]; because its atached with backend parameters uniques with every div, ul, etc.
Its my first question at SO, and english is not my first language. So if a make any mistake, please advice me and I'll change. Thank you so much!!
Edit1:
testing:
.html(function(i) {
return arr[i];
});
FULL CODE:
const arr = $('#listProducts ul li ul li div a').get().sort(function(a, b) {
return a.getAttribute('href') > b.getAttribute('href') ? 1 : -1;
}).map(function(el) {
return $(el).clone(true)[0];
});
$('#listProducts ul li ul li div').html(function(i) {
return arr[i];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="listProducts" class="listagem borda-alpha ">
<ul data-produtos-linha="3">
<li class="listagem-linha ">
<ul class="">
<li class="span4">
<div class="listagem-item">
2TH ELEMENT
<div class="another 1">another div 1</div>
<div class="another 2">another div 2</div>
</div>
</li>
<li class="span4">
<div class="listagem-item">
3RD ELEMENT
<div class="another 1">another div 1</div>
<div class="another 2">another div 2</div>
</div>
</li>
<li class="span4">
<div class="listagem-item">
1st ELEMENT
<div class="another 1">another div 1</div>
<div class="another 2">another div 2</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
expected:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="listProducts" class="listagem borda-alpha ">
<ul data-produtos-linha="3">
<li class="listagem-linha ">
<ul class="">
<li class="span4">
<div class="listagem-item">
1st ELEMENT
<div class="another 1">another div 1</div>
<div class="another 2">another div 2</div>
</div>
</li>
<li class="span4">
<div class="listagem-item">
2ND ELEMENT
<div class="another 1">another div 1</div>
<div class="another 2">another div 2</div>
</div>
</li>
<li class="span4">
<div class="listagem-item">
3RD ELEMENT
<div class="another 1">another div 1</div>
<div class="another 2">another div 2</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
ADD:
The .get().sort is to sort the results alphabetically, according to the URL and is working fine.
"another div 1" and "another div 2" are not the same as those "another div 1" and "another div 2" on the other li.
There are much more than 3 items.
If the <li> items are already in the <ul>, you can pass a function into .html() and use the index i it gives to access the content you want to place into each <li> like so:
const arr = ['A','B','C'];
$("#listProducts ul li").html(function(i) {
return arr[i];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=listProducts>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
If the <li>s aren't already inside your <ul> you can map your arr to a list of elements, and then use .html() to add these elements to the <ul>:
const arr = ['A','B','C'];
$("#listProducts ul").html($.map(arr, function(text) {
return $('<li>', {text});
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=listProducts>
<ul>
</ul>
</div>
EDIT:
You can get all the <li> and sort these by the anchor tags href attribute. You can then use .append() to append the sorted elements to your DOM. The purpose of using .append() rather than .html() is that .append() will insert the elements into the DOM, thus removing the old element and adding the new one (so no need to .clone())
const arr = $('#listProducts ul li ul li').get().sort(function(a, b) {
const anchorA = $("a", a);
const anchorB = $("a", b);
return anchorA.attr('href') > anchorB.attr('href') ? 1 : -1;
});
$('#listProducts ul li ul').append(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="listProducts" class="listagem borda-alpha ">
<ul data-produtos-linha="3">
<li class="listagem-linha ">
<ul class="">
<li class="span4">
<div class="listagem-item">
2TH ELEMENT
<div class="another 1">1. another div 1</div>
<div class="another 2">1. another div 2</div>
</div>
</li>
<li class="span4">
<div class="listagem-item">
3RD ELEMENT
<div class="another 1">2. another div 1</div>
<div class="another 2">2. another div 2</div>
</div>
</li>
<li class="span4">
<div class="listagem-item">
1st ELEMENT
<div class="another 1">3. another div 1</div>
<div class="another 2">3. another div 2</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

jquery toggle only one item

i try to add jQuery script that will toggle my footer columns, my problem is how I can make to stop toggling all items. Now when someone click on H4 tags all H4 tags are toggle together.
HTML:
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery SCRIPT
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle(); }
else {
jQuery(this).find('span').addClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle();
}
});
You could also try the following code:
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer-cols h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parent().next().slideToggle();
}
else {
jQuery(this).find('span').addClass('opened').parent().next().slideToggle();
}
});
The problem with your selector is that with
parents('.footer-cols')
You basically select
<div class="row footer-cols"></div>
element on top. Thus
find('.footer-cols-content')
selects all child elements in it resulting all of them to slideToggle()
on the click handler change .parents('.footer-cols') for .parents('.col-sm-4')
You will need to add content to the span to give the user something to click
This one changes the plus/minus and hides other content
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) $(this).append('<span class="toggle" />');
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
To add the span on the fly:
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
.footer-cols-content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information </h4>
<div class="footer-cols-content">
<ul>
<li>About Us
</li>
<li>Customer Service
</li>
<li>Privacy Policy
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us <span class="toggle">+</span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns
</li>
<li>Secure Shopping
</li>
<li>International Shipping
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am not sure why are you appending span class but If I am not worng only slide toggle should do the work that you intend to do.
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The above code will work only when the footer-cols-content div is always next to h4. To avoid as such you can use parent().
jQuery('.footer h4').on("click", function(){
$(this).parent().find('footer-cols-content').slideToggle();
});

multiple tab content area in a page

I am trying to develop a very simple jquery tab where I would have the flexibility to add multiple tab content areas in the page. I can make a single tab work..but when i am trying to make it more generic where I am saying I will increase the number of contents by just increment the wrapper by naming the class like container_1, container_2...etc
This is what I have so far which is as obvious as it might be is not working
$('<li class="spacer"></li>').insertAfter('.tabs li');
$('.tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
for (var i = 0; i <= 20; i++) {
$('.container_[i] .tabs li a').click(function () {
var title = $(this).attr('id');
if ($(this).hasClass('inactive')) {
$('.tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#' + title + 'Content').show();
}
});
}
here is my markup
<div class="container_1">
<ul class="tabs">
<li><a id="tab1">soum</a>
</li>
<li><a id="tab2">sherry</a>
</li>
<li><a id="tab3">neighbor cat</a>
</li>
</ul>
<div class="container" id="tab1Content">Soum's content</div>
<div class="container" id="tab2Content">Sherry's content</div>
<div class="container" id="tab3Content">neighbor cat's content</div>
</div>
<div class="container_2">
<ul class="tabs">
<li><a id="tab1">Freddy</a>
</li>
<li><a id="tab2">Teddy</a>
</li>
<li><a id="tab3">Brady</a>
</li>
</ul>
<div class="container" id="tab4Content">Freddy's content</div>
<div class="container" id="tab5Content">Teddy's content</div>
<div class="container" id="tab6Content">Brady's content</div>
</div>
Here is my fiddle
http://jsfiddle.net/sghoush1/LF4rp/17/
You are over complicating things. With this setup you can actually have the content div use a class instead of an id but I did not change that part because I thought maybe you are using IDs for a reason
http://jsfiddle.net/LF4rp/18/
$('.containers .tabs li a').click(function () {
var title = $(this).attr('id');
var parent = $(this).closest('.containers');
parent.find('.active').removeClass('active');
$(this).addClass('active');
parent.find('#' + title + 'Content').addClass('active');
});
HTML
<div class="container_1 containers">
<ul class="tabs">
<li><a id="tab1">soum</a>
</li>
<li><a id="tab2">sherry</a>
</li>
<li><a id="tab3">neighbor cat</a>
</li>
</ul>
<div class="container" id="tab1Content">Soum's content</div>
<div class="container" id="tab2Content">Sherry's content</div>
<div class="container" id="tab3Content">neighbor cat's content</div>
</div>
<div class="container_2 containers">
<ul class="tabs">
<li><a id="tab4">Freddy</a>
</li>
<li><a id="tab5">Teddy</a>
</li>
<li><a id="tab6">Brady</a>
</li>
</ul>
<div class="container" id="tab4Content">Freddy's content</div>
<div class="container" id="tab5Content">Teddy's content</div>
<div class="container" id="tab6Content">Brady's content</div>
</div>
CSS
.container {
display: none;
}
.container.active {
display: block;
}
to open the containers with jquery you can do
$('.containers .tabs li:first-child a').addClass('active');
$('.containers').each(function() {
$(this).find('.container:first').addClass('active');
});
http://jsfiddle.net/LF4rp/19/

Appending previous and next buttons

Trying to append PREVIOUS/NEXT function in my website. When the next button is clicked, I want the current tab move to the right next to it.
<div class="nav">
<div id="prev" class="previous" style="display:none">
Prvious
</div>
<div id="prevempty">
</div>
<div id="crumbs">
<ul>
<li id="li1" class="current">One</li>
<li id="li2"><a id="li2A" href="#2" value="two" onclick="MenuFunction(2);">Two</a></li>
<li id="li3">Three</li>
<li id="li4">Four</li>
<li id="li5">Five</li>
</ul>
</div>
<div id="nxt" class="next">
Next
</div>
</div>
$(document).ready(function(){
$("#nxt").click(function(){
$("#prev").show();
$(".current").next().addClass("current").end().removeClass("current");
if($(".current").attr("id") == "li5")
{
$("#nxt").hide();
}
});
$("#prev").click(function(){
$("#nxt").show();
$(".current").prev().addClass("current").end().removeClass("current");
if($(".current").attr("id") == "li1")
{
$("#prev").hide();
}
});
});

jQuery find closest ul

My HTML structure is like this:
<div class="product-slider-title">
<div><span class="left"> </span></div>
<div>Sample title</div>
<div><span class="right"> </span></div>
</div>
<div id="prslider1" class="product-slider-wrapper">
<div class="left-prduct-slider-nav sprites"></div>
<div class="right-prduct-slider-nav sprites"></div>
<div class="product-slider">
<ul>
<li class="product-holder"></li>
</ul>
</div>
</div>
How can i find the closest .product-slider ul from .left-prduct-slider-nav when i click on .left-prduct-slider-nav?
if this is .left-prduct-slider-nav then
var ul = $(this).siblings('.product-slider').find('ul')
Demo: Fiddle
You can use nextAll() to search the siblings after current element and use find() to searched the children in the matched element returned by nextAll.
Live Demo
$(this).nextAll('.product-slider').find('ul');
This should work
var ul = $('.left-prduct-slider-nav').closest('ul');
Hmm try this:
$('.left-prduct-slider-nav').click(function () {
var closest_ul = $(this).parent().find('.product-holder ul');
});
The closest .product-slider ul from .left-prduct-slider-nav is just the first one in the list, so you can use :first:
$('.left-prduct-slider-nav').click(function() {
$(this).parent().find('.product-slider ul:first')
})
Try first-child:
HTML:
<div class="product-slider-title">
<div><span class="left"> </span>
</div>
<div>Sample title</div>
<div><span class="right"> </span>
</div>
</div>
<div id="prslider1" class="product-slider-wrapper">
<div class="left-prduct-slider-nav sprites">Left Slider Nav</div>
<div class="right-prduct-slider-nav sprites"></div>
<div class="product-slider">
<ul>
<li class="product-holder1"></li>
</ul>
<ul>
<li class="product-holder"></li>
</ul>
<ul>
<li class="product-holder"></li>
</ul>
<ul>
<li class="product-holder"></li>
</ul>
</div>
</div>
<div class="product-slider-title">
<div><span class="left"> </span>
</div>
<div>Sample title</div>
<div><span class="right"> </span>
</div>
</div>
<div id="prslider1" class="product-slider-wrapper">
<div class="left-prduct-slider-nav sprites"></div>
<div class="right-prduct-slider-nav sprites"></div>
<div class="product-slider">
<ul>
<li class="product-holder"></li>
</ul>
</div>
</div>
JS:
$(document).ready(function () {
$(".left-prduct-slider-nav").click(function () {
alert($(".product-slider").find("ul:first-child").find("li").prop("class"));
});
});
jsFiddle.
Explanation:
I handle the .click() function of .left-prduct-slider-nav then I alert the class of the closest or in other words the first ul:first-child's li.
Proof:
The proof is that I changed the class of the first ul's li and then alert() it and then the output I get is this: product-holder1.
Try this:
$(this).next().next().find('ul');

Categories