We Keep Coding

JQuery each issue - div wrapped twice

I'm trying to solve an issue that I'm facing with JQuery about each.
I have a list of items (class .list) that I need to target and wrap in a div (class .wrap). It works if the list but when there is a second one the loop wrap twice the list in the new div.
The idea is that every time there is a class called list, the loop wrap that specific class in a div called wrap.
Here is the code
HTML
<div class='parent'>
<div class='child'>
<div class='list'>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
<div class='parent'>
<div class='child'>
<div class='list'>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
JQuery
jQuery(".parent").each(function () {
jQuery(".list").wrap("<div class='wrap'></div>");
});
This is the result with the error.
The class list is wrapped twice as you can see from the example below.
<div class="parent">
<div class="child">
<div class="wrap"><div class="wrap"><div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
</div></div></div>
</div>
</div>
And this is what I'm trying to achieve.
<div class="parent">
<div class="child">
<div class="wrap">
<div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
</div>
Thank you in advance!

You want to select the list in the parent, not select all lists
jQuery(this).find(".list").wrap()

Hide Parent Div if nested div is empty

I'm trying to hide the outer div when a nested div is empty (including white-space node). I've found a solution that works if there is NO whitespace:
Hide parent DIV if <li> is Empty
I need it to work when there IS white space present, ie:
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
Example fiddle

Working fiddle
You could use the both :empty and :contain() selector :
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide();
Hope this helps.
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>

You can iterate over each div.product and trim the text to remove whitespace. If there's anything left, show it, otherwise, hide its wrapper.
$("div.product").each(function() {
if ($(this).text().trim() == '') {
$(this).closest('div.wrapper').hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>

//Try this using Jquery
<script>
//A perfect reference in Jquery...
var element=$('#target_child');
if($(element).html()==''){
$(element).parent().hide()
}else{
//do some work
}
</script>

event to modify sibling element

In a web page, I have a grid of divs. In each div are 3 divs, the 2nd is hidden, I want it so that when the user hovers over the 3rd div, the 1st div becomes hidden and the 2nd is displayed.
I'm using jquery.
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">dolly
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">kitty
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
Here's a Codepen

Your whoOn and whoOff methods can be combined like this:
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoBoth(this);" onmouseout="whoBoth(this);" class="hover">hover me</div>
</div>
Javascript:
function whoBoth(target) {
$(target).siblings(".hello, .who").toggle();
}

How to toggle all but selected elements in jquery

I am trying to do the following:
There are multiple "title" and "text" divs on a page.
Upon loading the page only the first text is visible.
When clicking on any title, its text slides down and all other texts slide up.
So far I came up with the following:
HTML:
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
jQuery:
$('.title').click(function () {
$(this).next().slideToggle();
})
https://jsfiddle.net/e3okos3e/
However, this is very basic.
Can you tell me how to select every text other than the selected title's one?
How to make only the first one visible at loading?

So, if all of the text divs are hidden by default, then do this:
$(document).ready(function(){
$('.title').click(function () {
$('.active').slideToggle().removeClass('active');
$(this).next().slideToggle().addClass('active');
})
});
.title {
width: 100px;
height: 20px;
border: 1px solid #cc0;
}
.text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text1</div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text2</div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text3</div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text4</div>
</div>

Fairly straightforward using not()
var $text = $('.text');// cache elements
$('.title').click(function () {
var $next = $(this).next().slideDown();// or slideToggle()
$text.not($next).slideUp();
});
DEMO

How to append a dom element inside another dom element but in first position in jquery

I have this html:
<div id="wrapper">
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
</div>
I want to append this line
<div id="first">first</div>
between the div#wrapper and the first div.inner - so it will always be the first element even if there are no elements.
so it will look like this:
<div id="wrapper">
<div id="first">first</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
</div>
or in case I have no .inner div's it will look like this:
<div id="wrapper">
<div id="first">first</div>
</div>
How do I do that?
thanks,
Alon

Use prepend() (docs)
$('#wrapper').prepend('<div id="first">first</div>');