Develop Reference

Use variable as selector in function

On click, I want to get the name of the closest div and then look for all div's, that have this name attribute and add a class to them.
Here is my code:
HTML:
<div class="wrapper">
<div class="container" name="button1">
<div class="button">this is p #1</div>
</div>
</div>
<div name="button1">
somewhere else
</div>
JS:
$('.wrapper').on("click", '.button', function() {
var attrname = $(this).closest('.container').attr('name');
$("div[name=attrname]").each(function() {
$(this).addClass("classtobeadded");
});
});
But it is not working. So, how can I use the variable in here:
$("div[name=attrname]").each(function()
Here is the fiddle:

There's a few issues with your logic. Firstly the .container element does not have the name attribute, the .button does, so you don't need to use closest(). Secondly, you need to concatenate the actual name value in to the selector. Lastly div elements do not have a name attribute so the HTML is invalid. If you want to store custom meta-data on an element use a data attribute instead.
Also note that you don't need the each() loop, you can just call addClass() on the collection selected with the data-name attribute. Try this:
$('.wrapper').on("click", '.button', function() {
var attrname = $(this).data('name');
$('div[data-name="' + attrname + '"]').addClass("classtobeadded");
});
.classtobeadded {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="button" data-name="button1">this is p #1</div>
</div>
</div>
<div data-name="button1">
somewhere else
</div>

You have to concatenate it properly,
$(`div[name=${attrname}]`).each(function() {
And by the way, when looking at your code there is no attribute available in the closest div with a class .container. Check that as well.

$("div[name=" + attrname + "]").each(function() {})
or
$(`div[name=${attrname}]`).each(function() {})

jQuery - Find first div with specific ID inside a Div?

So my code always follows the same kind of format:
<div id="container">
<div id="firstDiv">
</div>
</div>
Sometimes it's like this (and this is what I want to ignore):
<div id="container">
<div id="banner">
</div>
<div id="firstDiv">
</div>
</div>
So what I want to do is
IF the first div inside #container is equal to #firstDiv - add a banner. else (there's already a banner there) do nothing.
Any help with this would be great!!
Thanks!!

You can do that:
if($('#container > div:first').attr('id') == 'banner') {
//banner exists
} else {
//banner not exists
}

Use a child selector:
div#container > div#firstDiv

You can
$('#firstDiv:first-child').before('<div class="banner">banner</div>');
$('#firstDiv2:first-child').before('<div class="banner">banner</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="firstDiv">Div</div>
</div>
<div id="container2">
<div id="banner">Banner</div>
<div id="firstDiv2">Div</div>
</div>

Try this:
if($("#container").find("#banner").lenght == 0){
// You have the banner
}else{
// you dont`n have the banner
}

try this:
(function(){
if(!$('#firstDiv','#container').length){
$('#container').prepend(jQuery('<div id="firstDiv">'));
}
})(jQuery);

With the children() selector you get all the children element of #container.
With the first() you get the first one, and with attr('id') you get the id name.
Then you just have to check what id name you have
Example:
if($("#container").children().first().attr('id') != "banner"){
addBanner();
}

Jquery how to select all element but children

I have a code like that:
<div id="mn">
<span></span>
<span> <span></span></span>
<span></span>
<span> <span></span></span>
<span></span>
</div>
when i use:
$("#mn").each(function(index, element) {
)};
it selects all span tags and span inside span tags, how do i select only parents span tags.

you can do this way:
$("#mn > span").each(function(index, element) {
)};
This will only give immediate child span elements.
JQUERY DOCS

Use the child selector parent > child
$("#mn > span")

JQuery - How to insert element after parent element?

I try to find if an element is on the page. If the element is on the page then find its parent element and insert it after that parent element.
JQuery:
if($('.underline .catIcon').length > 0){
$('.underline .catIcon').each(function(){
$(this).insertAfter($(this).parent().find('h2'));
$(this).css('float','left');
});
}
HTML:
<h2 class="underline">
<div class="catIcon" style="padding-right: 10px;"><!-- element to move -->
<img class="catIcon" alt="Projects" src="http://www.example.com/storage/images/category/on-site-support56x56.jpg" style="float: left;">
</div>
Projekty
</h2>
<!-- here before text and after h2 tag with class underline -->.text
<a class="link2 ui-link" target="_blank" href="http://www.example.com/cz/cs/22.html">>> info</a>

The h2 is the parent's parent element, so you need to use .closest('h2'), not .parent().find('h2') - it looks for a h2 element inside the image's parent(div)
jQuery(function(){
$('.underline .catIcon').each(function () {
$(this).insertAfter($(this).closest('h2'));
$(this).css('float', 'left');
});
});
Demo: Fiddle

use closest()
you need to go parent .underline then don't find in this
if($('.underline .catIcon').length > 0){
$('.underline .catIcon').each(function(){
$(this).insertAfter($(this).closest(".underline"));
$(this).css('float','left');
});
}

Wrap pairs of elements?

If you have the following code:
<div class="parent">
<div class="1a"></div>
<div class="1b"></div>
<div class="2a"></div>
<div class="2b"></div>
<div class="3a"></div>
<div class="3b"></div>
</div>
Is there an efficient/easy way to wrap a new div around each a + b so it finishes looking like this:
<div class="parent">
<div class="new-1">
<div class="1a"></div>
<div class="1b"></div>
</div>
<div class="new-2">
<div class="2a"></div>
<div class="2b"></div>
</div>
<div class="new-3">
<div class="3a"></div>
<div class="3b"></div>
</div>
</div>
For example can I say something like:
wrap every two divs inside .parent with <div class="new-(incremental variable)"></div> (the new wrapping divs need to have a unique class)

Like this?
$('.parent > div:odd').each(function(i){
$(this)
.prev()
.addBack()
.wrapAll($('<div/>',{'class': 'new-' + (i+1)}));
});
Demo
Get the odd ones selected i.e 1, 3, 5 etc based on index(0 based); Iterate the odd ones get the prev element relative to the odd(which needs to be paired), use andSelf addBack to select that too and then use wrapAll on the pair.
if you want to ignore first x of them then do this:
$('.parent > div:gt(' + (x-1) + '):odd').each(function(i){
$(this)
.prev()
.addBack()
.wrapAll($('<div/>',{'class': 'new-' + (i+1)}));
})
Demo

You can literally use jQueries Wrap function. Take a look here!
http://api.jquery.com/wrap/

I'm not sure what you wish to achieve with the new wrapper divs but nth-child in CSS might be useful. Try something like this:
div.parent div {width:50%;}
div.parent div:nth-child(odd) {clear:both; float:left;}
div.parent div:nth-child(even) {float:right;}
...which will give you pairs of divs side by side.