WrapAll() on multiple classes with multiple appearance - javascript

Lets say this is my HTML
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
</ul>
Now I want to wrap .product-thumbnail and .product-price in
<div class="left"></div>
Like this
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
</ul>
This code does the trick if I had only one list item
$(".product-thumbnail, .product-price").wrapAll("<div class='left'></div>");
I've tried an each() on .product-thubnail and .product-price but without results..
Does anyone know how I could do this or how it could be done with each()?


Iterate over the .product-title using each() method and combine with the immediate next element using add() method.
$('.product-title').each(function() {
$(this).add($(this).next()).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>
Or iterate over the li and get both classes within the element by providing the context.
$('.product').each(function() {
$('.product-title,.product-thumbnail', this).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>

Related

jQuery select parent of element and use prependTo() for it

I am trying to restructure elements. The problem I face is that the elements do not have unique classes or IDs. So if, for example, a .prependTo is being called, it moves obviously all matching elements. HTML looks like this (important: real scenario contains hundreds of <li> elements):
<div id="top-element">
<ul>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example</div>
</div>
</li>
</ul>
</div>
So I want to move text3 as the first child of text-parent. But only in its own parent element. So text3 should not move to the other <li> elements. I have tried this, but it's not correct, it still crosses all elements:
$('.text3').parent('.text-parent').prependTo('.text-parent');
How do I limit the function to its parents?

Your code is wrong because it select all .text-parent and insert every one in another. You need to loop through .text3 using .each() and in function select relevant parent of elements.
$('.text3').each(function(){
$(this).parent().prepend(this);
// Or
$(this).parent('.text-parent').prepend(this);
// Or
$(this).prependTo($(this).parent('.text-parent'));
});
$('.text3').each(function(){
$(this).parent().prepend(this);
});
.text-parent {border: 1px solid #000}
.text-parent > .text3 {color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-element">
<ul>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example2</div>
<div class="text3">example3</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example2</div>
<div class="text3">example3</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example2</div>
<div class="text3">example3</div>
</div>
</li>
</ul>
</div>

You can use insertBefore
Insert every element in the set of matched elements before the target.
$(this).insertBefore($(this).siblings('.text1'));
$(".text3").each(function(){
$(this).insertBefore($(this).siblings('.text1'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-element">
<ul>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example3</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example3</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example3</div>
</div>
</li>
</ul>
</div>

Show and hide div based on the selection

I want to hide div for all which are not active. but when ever i reload all the tab contents come into one. Below is a screenshot of the the UI where am facing the problem.
Below are the code.
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form animated fadeInDown ">
<ul class="tab-group">
<li class="tab active">Roles</li>
<li class="tab ">User</li>
<li class="tab ">Portfolio</li>
<li class="tab ">Programs</li>
<li class="tab ">Projects</li>
<li class="tab ">Phases</li>
<li class="tab ">Tasks</li>
</ul>
<div class="tab-content">
<div id="roles" >
<h1> Roles coming soon</h1>
</div>
<div id="user">
<h1>Users added soon</h1>
</div>
<div id="portfolio">
<h1>Portfolio added soon</h1>
</div>
<div id="programs">
<h1>Programs added soon</h1>
</div>
<div id="projects">
<h1>Projects added soon</h1>
</div>
<div id="phases">
<h1>Phases added soon</h1>
</div>
<div id="tasks">
<h1>Tasks added soon</h1>
</div>
</div>
</div>
I tried as much as possible but couldn't get this thing right. A help is much appreciated.

Just apply the given CSS, other than that your code seems working for me.
//See the first tab visible by default
$($('.tab-group > li.active').children('a').attr('href')).show();
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
.tab-content div{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form animated fadeInDown ">
<ul class="tab-group">
<li class="tab active">Roles</li>
<li class="tab ">User</li>
<li class="tab ">Portfolio</li>
<li class="tab ">Programs</li>
<li class="tab ">Projects</li>
<li class="tab ">Phases</li>
<li class="tab ">Tasks</li>
</ul>
<div class="tab-content">
<div id="roles">
<h1> Roles coming soon</h1>
</div>
<div id="user">
<h1>Users added soon</h1>
</div>
<div id="portfolio">
<h1>Portfolio added soon</h1>
</div>
<div id="programs">
<h1>Programs added soon</h1>
</div>
<div id="projects">
<h1>Projects added soon</h1>
</div>
<div id="phases">
<h1>Phases added soon</h1>
</div>
<div id="tasks">
<h1>Tasks added soon</h1>
</div>
</div>
</div>

How to reduce number of lines in jquery code

I am learning jquery, and need your help. I want to reduce the number of codes here:
I have three buttons on navbar. cart, .account, .help. If I click on cart, I want to hide dropdown menu for account and help. Same goes for other buttons. Here is the jquery code, I have written so far! Could anyone help me to reduce the number of lines of code?
Jquery Code:
$(".cart").click(function(){
$(".cart .dropdown-menu").show();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").hide();
});
$(".account").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").show();
$(".help .dropdown-menu").hide();
});
$(".help").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").show();
});
HTML CODE:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>madison square market</h1>
</div>
<div class="pull-right">
<ul>
<li class="cart dropdown">
<h3>cart ▾</h3>
<ul class="dropdown-menu">
<li>View Cart</li>
<li>Saved Carts</li>
</ul>
</li>
<li class="account dropdown">
<h3>account ▾</h3>
<ul class="dropdown-menu">
<li>View Account</li>
<li>Check Order Status</li>
<li>Sign in</li>
</ul>
</li>
<li class="help dropdown">
<h3>help ▾</h3>
<ul class="dropdown-menu">
<li>FAQs</li>
<li>Return Policy</li>
<li>Shipping Info</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
</div>
<div class="supporting">
<div class="container">
<h2>recent arrivals</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>popular produce</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h3>follow</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>

Hello You can reduce it like this
$('.dropdown-menu').prev("h3").on("click",function(){
$('.dropdown-menu').hide();
$(this).next(".dropdown-menu").show();
});

How to wrap all elements in each container

I need to wrapAll divs that are children of li except the div with class A. Also need to keep them in their parent li's.
Current html:
<ul class="container">
<li>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
</li>
<li>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
</li>
</ul>
Desired output:
<ul class="container">
<li>
<div class="a"></div>
<div class="wrapped">
<div class="b"></div>
<div class="c"></div>
</div>
</li>
<li>
<div class="a"></div>
<div class="wrapped">
<div class="b"></div>
<div class="c"></div>
</div>
</li>
</ul>
Thought this code would do it but it's not working. I would like to use a variable to define the selected divs:
var selected = $("li").children().not(".a");
$(selected).each(function() {
$(selected).wrapAll($("<div class='wrapped'></div>"));
});

Iterate over each li and then wrap it's children which don't have class a.
wrapAll will wrap all possible matched elements, so it'll also wrap the matched elements from other li.
$('li').each(function() {
$(this).children().not('.a').wrapAll('<div class="wrapped"></div>');
});
.wrapped {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
<li>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
</li>
<li>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
</li>
</ul>

I have Some Problems With Using CSS With jQuery

i have a web page that has some dialog boxes. i made a blur background for these dialogs. it works fine until now. but when the user closes the dialog all my styles will get corrupt. for example border radiuses will gone and overflow:hidden doesn't works fine. why does this happen. and how can i fix this problem?
this is the code that opens the dialog box:
$("#faq").click(function(){
$("#bg, #FAQ").slideDown(300);
$("#b").css("-webkit-filter","blur(100px)");
});
and this is the code for closing the dialog box:
$("#bg").click(function(){
$("#addtocart, #tamas, #about, #khabar, #FAQ, #bg").fadeOut(500);
$("#b").css("-webkit-filter","blur(0px)");
});
another thing, when i use this code for showing the dialog box, everything will work slower than before. how to fix this?
this is the HTML Code:
<div id="b">
<nav id="navigation">
<img src="images/HSLogo.png" id="Logo">
<span id="Logotext">Store</span>
<ul id="nav_list">
<li id="faq">Item 1</li>
<li id="tbm">Item 2</li>
<li id="abu">Item 3</li>
<li id="nws">Item 4</li>
</ul>
</nav>
<section id="products">
<div id="prdct10" class="product">
<img src="images/10ditcb.png" title="...اطلاعات بیشتر" class="bg 10d" width="102%" height="102%">
</div>
<div id="prdct15" class="product">
<img src="images/15ditcb.png" title="...اطلاعات بیشتر" class="bg 15d" width="102%" height="102%">
</div>
<div id="prdct25" class="product">
<img src="images/25ditcb.png" title="...اطلاعات بیشتر" class="bg 25d" width="102%" height="102%">
</div>
<div id="prdct50" class="product">
<img src="images/50ditcb.png" title="...اطلاعات بیشتر" class="bg 50d" width="102%" height="102%">
</div>
<div id="prdct100" class="product">
<img src="images/100ditcb.png" title="...اطلاعات بیشتر" class="bg 100d" width="102%" height="102%">
</div>
<div id="prdcta" class="product">
<img src="images/appleid.png" title="...اطلاعات بیشتر" class="bg aid" width="102%" height="102%">
</div>
</section>
<section id="copyright">
<p>Text Text</p>
</section>
</div>
thanks for reading

Categories