We Keep Coding

Enclose whole div in an <a>

I have a div which I want to surround with an <a href>. I have the jQuery to add the <a href> after the div but I struggle to set it before and close it after the div.
This is the jQuery code I have:
$('.box_service').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
It results in this HTML:
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
However my goal is this structure:
<div class="row">
<a href="example.com">
<div class="box_service">
<div class="inner-row"></div>
</div>
</a>
</div>
I can't enter the div before because there are more boxes in this row so I would add the <a href> to everything in there

The issue is due to your call to contents() which means you're wrapping the elements inside .box_service, not that element itself. Remove that method call.
Also note that each() is redundant, you can do what you require in a single line:
$('.box_service').wrap('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
Box service #1
<div class="inner-row">Inner row #1</div>
</div>
</div>
<div class="row">
<div class="box_service">
Box service #2
<div class="inner-row">Inner row #2</div>
</div>
</div>

.content will wrap the contents of your div, you want to wrap the div with <a> so call wrap on the div not on contents.
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<div class="inner-row"></div>
</div>
</div>

$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
You just need to remove contents() in between $(this).wrap() because contents() mean that you are wrapping the children of $(this).

Remove .contents() in order to wrap around each element with the class box-service:
$('.box_service').each(function() {
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>

$('.box_service').wrap('');

jQuery $(this) selector accidentally selects more than 1 element

I'm using the .each() jQuery function together with the $(this) selector to effect a hovered div, but because the given divs are close to one another, the $(this) selector selects more than one element if I move the mouse too fast.
Is there any way to make sure to force $(this) not to select more than one element?
Here is my HTML:
<div class="row">
<div class="col-md-4 donation 180">
<div class="box">
<div class="cover">
<h2>Freedom<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 200">
<div class="box">
<div class="cover">
<h2>Sovereignty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 400">
<div class="box">
<div class="cover">
<h2>Royalty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
</div>
And here is my jQuery:
if($(window).width() < 800 ) {
$(".form").show();
$(".cover").hide();
} else {
$(".donation").each(function() {
$(this).hover(function() {
$(this).children($(".box")).addClass("animated flipInY");
$(this).children($(".box")).children($(".cover")).fadeOut("", function() {
$(this).siblings($(".form")).show();
});
}, function() {
$(this).children($(".box")).removeClass("animated flipInY");
$(this).children($(".box")).children($(".form")).fadeOut("", function() {
$(this).siblings($(".cover")).show();
});
});
});
}
I would appreciate your help, Thank You!

You don't need to use $(this). You can use the value from each.
$(".donation").each(function(i, val) {
alert($(val).attr('class'));
});

Can't traverse the DOM with next

I have the following markup
<a class="list-group-item" href="#">
<div class='row'>
<div class='col-xs-10 shows-submenu'>
<h4 class="list-group-item-heading">A title</h4>
</div>
</div>
</a>
<div class='list-group-item hidden-group-item hide'>
<div class="row">
<div class="col-sm-12">
<p class="list-group-item-text">
Some text
</p>
</div>
</div>
</div>
I'd like to remove the 'hide' class in the 'hidden-group-item' when I click the 'shows-submenu'.
I was trying to do it with the following jQuery
$(function(){
$('body').on('click', '.shows-submenu', function() {
if ($(this).next('.hidden-group-item').hasClass('hide')) {
$('.hidden-group-item').addClass('hide');
$(this).next('.hidden-group-item').toggleClass('hide');
}
else {
$(this).next('.hidden-group-item').toggleClass('hide');
}
$('.hidden-form-item').addClass('hide');
});
});
but I can't make it work. The next() method seems to work only if the 'shows-submenu' class is added to the whole a tag but not in the col-xs-10 div where I want it to be.
Could you figure out why is this not working?
Thanks

div.hidden-group-item is not a sibling of .shows-submenu element thus .next() will not work.
You can use .closest() to traverse up ancestor and then use .next()
var hiddenDiv = $(this).closest('a.list-group-item').next('.hidden-group-item');
You code can also be improved.
$(function() {
$(document).on('click', '.shows-submenu', function() {
var hiddenDiv = $(this).closest('a.list-group-item').next('.hidden-group-item');
$('.hidden-form-item').not(this).addClass('hide');
hiddenDiv.toggleClass('hide');
});
});
.hide {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="list-group-item" href="#">
<div class='row'>
<div class='col-xs-10 shows-submenu'>
<h4 class="list-group-item-heading">A title</h4>
</div>
</div>
</a>
<div class='list-group-item hidden-group-item hide'>
<div class="row">
<div class="col-sm-12">
<p class="list-group-item-text">
Some text
</p>
</div>
</div>
</div>

Replace the following:
$(this).next('.hidden-group-item')
with
$(this).closest('a').next('.hidden-group-item')
and try again.
Explanation: next() get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
And hidden-group-item is not the sibling in your html.

Try this:
$('body').on('click', '.shows-submenu', function() {
if ($(this).closest(".list-group-item").next('.hidden-group-item').hasClass('hide')) ......

next() method will only work in siblings.
use find() method instead like this.
$.find('.hidden-group-item').toggleClass('hide');

Hide element inside same parent by class with jquery

Take the following html:
<div class="box">
Toggle
<h2>Some Title</h2>
<div class="box_content box_content_1"></div>
<div class="box_content box_content_2"></div>
</div>
<div class="box">
Toggle
<h2>Some Title</h2>
<div class="box_content box_content_1"></div>
<div class="box_content box_content_2"></div>
</div>
<script>
function toggle_content(key){
$('.box_content_'+key,$(this).parent()).toggle();
}
</script>
Basically, when the toggle link is clicked, I would like the toggle the element inside the same parent that has the matching class name. The code above doesn't seem to do anything.

$(this).parent() doesn't refer to what you think it does. What is this in this context? Window.
The following will work:
$('.box_content_'+key,".box").toggle();
I would do it this way, though:
HTML
Toggle
jQuery
$(".toggle").click(function() {
var key = $(this).data("toggle-id");
console.log(key);
$('.box_content_'+key, $(this).parent()).toggle();
});
Demo

As you are using jQuery you can use the jQuery click and siblings() methods, try the following:
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
$('.box a').click(function(){
$(this).siblings('.box_content_1').toggle()
})
You can use data=* attribute for selecting the target elements of the anchors:
<div class="box">
Toggle
<h2>Some Title</h2>
<div class="box_content box_content_1"></div>
<div class="box_content box_content_2"></div>
</div>
<div class="box">
Toggle
<h2>Some Title</h2>
<div class="box_content box_content_1"></div>
<div class="box_content box_content_2"></div>
</div>
$('.box a').click(function(e){
e.preventDefault();
var which = $(this).data('toggle');
$(this).siblings('.box_content_'+ which).toggle()
})

You can set the context of this in toggle_content by using call
onclick="toggle_content.call(this, 1)"
http://jsfiddle.net/eyWBq/

I have the answer to you!
HTML:
<div class="box">
Toggle
<h2>Some Title</h2>
<div class="box_content box_content_1">1</div>
<div class="box_content box_content_2">2</div>
</div>
​JS:
function toggle_content(key) {
$('.box_content_' + key).toggle();
}​
demo

Try this jsFiddle example.
HTML
<div class="box">
Toggle
<h2>Some Title</h2>
<div class="box_content box_content_1">a</div>
<div class="box_content box_content_2">b</div>
</div>
<div class="box">
Toggle
<h2>Some Title</h2>
<div class="box_content box_content_1">a</div>
<div class="box_content box_content_2">b</div>
</div>​
jQuery
function toggle_content(key,link){
link.siblings(".box_content_"+key).toggle();
}​
jsFiddle example

How i can select specific div from multiple divs in jquery

I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>

You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)

I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>​
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});​
I replaced the broken img links with simple text for the jsfiddle.