select many div tag in jquery - javascript

the below code is for many div tag :
<div class="posts">
<div id="ex">
<ul class="ul">
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
</ul>
</div>
<div id="ex">
<ul class="ul">
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
</ul>
</div>
</div>
and the below code is jquery code:
$(".ul li#item a").each(function(){
$(".ul li#item a:gt(0)").toggle();
});
i want to when run the code just show the first of li not all them.
please help me


Apply the each function with ul .And remove the id name from the selector.Because id is a unique one .hide() all li element.Then call the first().show(). its visibile only the first element
Updated
Note*:Avoid the duplication of same id name .better use classname
instead of id for multiple selector
$(".ul").each(function() {
$(this).find('li').hide().first().show()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
the below code is for many div tag :
<div class="posts">
<div class="ex">
<ul class="ul">
<li>see</li>
<li>s</li>
<li>s</li>
<li>s</li>
<li>s</li>
</ul>
</div>
<div class="ex">
<ul class="ul">
<li>see</li>
<li>s</li>
<li>s</li>
<li>s</li>
<li>s</li>
</ul>
</div>
</div>


This solution is also short and sweet.
$(document).ready(function(){
$("li").hide();
$("ul>li:first-of-type").show();
});

Related

How to make js only affect element of concern?

I have this super easy JS that does one thing; namely toggles an open class on a specific element in the page. Problem is that I have 4 repetitions of both the .clickSlide element and the .sub_menu element and when I click one of the elements to trigger the code all elements gets the open class. Only the element of concern, out of the 4, should get the open class.
My best guess is I am missing some sort of this in the JS. But I am open to solutions on this one!
jQuery(document).ready(function($) {
$(".clickSlide").click(function() {
$(".sub_menu").toggleClass("open");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ht_course_one">
<ul class="select-menu dropdown">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_two">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_three">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_four">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>

So the solution (based on Anass Kartit answer) was this:
jQuery(document).ready(function($) {
$(".clickSlide").click(function(){
$(this).children(".sub_menu").toggleClass("open");
});
});

How to add a new list item before another specific list item with class?

Using jQuery, I need to add a new list item within the below UL but it needs to be before the last list item that has the class="more".
<div class="nav nav-tabs">
<ul class="nav nav-tabs sub-nav" >
<li class="hor-menu">
<span class="class-a" >AA</span>
</li>
<li class="hor-menu">
<span class="class-a" >BB</span>
</li>
<li class="hor-menu">
<span class="class-a" >CC</span>
</li>
**<<< --- new list item entry to go here --- >>>**
<li class="more" style="display: none;">
<span>...</span>
<ul id="overflow"></ul>
</li>
</ul>
</div>
I have tried the following:
$("#nav-tabs ul").append('<li class="hor-menu"><span class="class-a" >DD</span></li>')
but am unsure how to insert it before the last li.more item.

First option
$('.more').before('<li class="hor-menu"><span class="class-a" >DD</span></li>');
Second option
First let's get the position of the more class.
var pos = $('nav-tabs > li').index($('.more'));
And then add it to the DOM
$('ul > li:eq('+pos+')')
.before('<li class="hor-menu"><span class="class-a" >DD</span></li>');

You can use the :last pseudo selector like this to select the last element of a set
$("li.more:last")
then you can use before to insert it before the last li more item.
$("li.more:last").before('<li class="hor-menu"><span class="class-a" >DD</span></li>');
Here is a working JSfiddle:
https://jsfiddle.net/mervinsamy/0n4g51hk/5/
I also added code snippet here:
$(document).ready(function(){
$("li.more:last").before('<li class="hor-menu"><span class="class-a" >DD</span></li>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav nav-tabs">
<ul class="nav nav-tabs sub-nav" >
<li class="hor-menu">
<span class="class-a" >AA</span>
</li>
<li class="hor-menu">
<span class="class-a" >BB</span>
</li>
<li class="hor-menu">
<span class="class-a" >CC</span>
</li>
<li class="more">
<span>...</span>
<ul id="overflow"></ul>
</li>
<li class="more">
<span>...</span>
<ul id="overflow"></ul>
</li>
<li class="more">
<span>...</span>
<ul id="overflow"></ul>
</li>
<li class="more">
<span>...</span>
<ul id="overflow"></ul>
</li>
</ul>
</div>

How to remove li tag by data attribute using jquery

I want to remove li tag by data attribute.
I want to remove 1st ul of child li which has class name like second Base when click.
My code looks like as below
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base">
<span data-addedname="SignatureBread" class="close-btn">Signature Bread</span>
<span data-addedname="Lettuce" class="close-btn">Lettuce</span>
</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces">
<span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span>
<span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>
I want to like this output. Here remove li of first ul.
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses">
<span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients">
<span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span>
<span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>

https://jsfiddle.net/926vogLk/
$('li.second.Base').click(function() {
$(this).remove();
});
or
if you want to remove first li of ul
$('li.second.Base').click(function() {
$(this).prev().remove();
});

If you want to remove only first ul then try #Akhsay mentioned solution. Or if you want to remove any ul with specific class or data attribute then do this.
$("ul[data-id=Base]").find("li.base").remove()
Or
$("li.Base").remove()

I am not sure if I hunderstood right but:
$("li.second.Base").parent().remove()
might help you

$('.second').on('click',function(){
$(this).fadeOut(300,function(){$(this).remove() });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base"><span data-addedname="SignatureBread" class="close-btn">Signature Bread</span><span data-addedname="Lettuce" class="close-btn">Lettuce</span></li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling"><span data-addedname="Steak" class="close-btn">Steak</span><span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span></li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span><span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span></li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span><span data-addedname="Pickles" class="close-btn">Pickles</span></li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients"><span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span></li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span></li>
</ul>
</div>

$(function() {
$('body').on('click', function() {
$('.box-ul').find('ul').find('li.Base:first').remove();
});
});

Trouble showing content with jQuery's .show()

I have a click handler on the "top level" <li>s that I want to hide all the content below the <li>s and then show the content below the particular <li> that was clicked.
The hiding works, but the showing does not.
$('.menu li').click(function() {
$('.submenu').hide();
var myclass = $('submenu');
$(this).show($submenu)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football
</li>
<li>cricket
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<li>Hockey
</li>
<li>Baseball
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>

Try this.
It hides the submenu with CSS.
Then it toggles the submenu when you click the list item.
If you only want one submenu to be shown at once, uncomment the line in the js.
$('.menu li').has('.submenu').click(function(e) {
e.preventDefault();
$(this).find('.submenu').slideToggle();
});
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>

You should try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
<script type="text/javascript">
$('.submenu').hide();
$(document).on("click",".menu li",function(){
$(this).find('.submenu').slideToggle();
});
</script>

You are using jQuery and there is toggle() function for show/hide toggle and use like this
$('.submenu').toggle();
and I fixed your script that doesn't work.
$('.menu li').click(function(){
$('.submenu').hide();
$(this).find('.submenu').show();
});
Working fiddle

Move li elements with certain class into and div

I am trying to use the .append function in jquery.
I have a div with li elements in it. They have different classes, lets say odds and evens.
I would like the li's with the class "odd" moved into another div with li's in it.
How can I do this?
Here is my setup:
Edit. This was in valid markup, I just didn't put all in. Fixed now for others.
<div id="col1">
<ul>
<li class="odd"></li>
<li class="even"></li>
<li class="odd"></li>
<li class="even"></li></ul>
</div>
<div id="col2">
<ul>
<li></li>
</ul>
</div>
So then the output is:
<div id="col1">
<li class="even"></li>
<li class="even"></li>
<li class="even"></li>
<li class="even"></li>
</div>
<div id="col2">
<li class="odd"></li>
<li class="odd"></li>
<li class="odd"></li>
<li class="odd"></li>
</div>

If you already have <div> elements which you are moving elements into you can try this:
$("#col1 li").each(function(){
var $li = $(this);
if ($li.hasClass("odd")) $("#odd").append($li);
if ($li.hasClass("even")) $("#even").append($li);
});
working example:
http://jsfiddle.net/hunter/jq8bW/

Your <li> must be contained inside a list <ol> or <ul>.
First, append <div id="col2">, but that div must also contain a <ul> or <ol> to be valid. Then append the odd <li> to the new list.
// Create <div id='col2'><ul id='col2-list'></ul></div>
$("#col1").after("<div id='col2'><ul id='col2-list'></ul></div>");
// Place the list elements inside it.
$("li.odd").appendTo($("#col2-list"));

Let's say you have valid html structure like this one:
<ul id="col1">
<li class="even"></li>
<li class="odd"></li>
<li class="odd"></li>
<li class="even"></li>
</ul>
<ul id="col2">
</ul>
Here the jQuery code:
$('#col1 > .odd').each(function() {
$(this).detach().appendTo('#col2');
});
Edit: the use of .detach() is not mandatory.

Categories

Resources