Develop Reference

Jquery: parse div blocks and add id(1,2,3,4,5)

I'm trying to make jquery parse list of div blocks and add id to each div one by one with numbers like 1,2,3,4,5 and so.
For example, here is the list of div blocks:
<div class="my-blocks">
<div class="start"></div>
<div class="start"></div>
<div class="start"></div>
<div class="start"></div>
</div>
There can be any amount of div blocks with class "start". Final result must be like this:
<div class="my-blocks">
<div id="1" class="start"></div>
<div id="2" class="start"></div>
<div id="3" class="start"></div>
<div id="4" class="start"></div>
</div>
How can I do that? I just don't really understand where I can start to reach this functionality.

You can use .each() to iterate over child divs and then use index+1 to set it as id value.try this:
$('.my-blocks div').each(function(){
$(this).attr('id',$(this).index()+1);
});
Working Demo

You can do:
$('.my-blocks .start').each(function(i) {
$(this).attr('id', i+1);
});
Also note that number is not valid id, you can use div-1, div-2... instead.
Fiddle Demo

You need to add an alphabetical prefix for the ids, Since setting an id as a numeric value is not acceptable in standards below html5. so that your code would achieve backward compatibility.
Try to use the receiver function of .attr(),
$('.my-blocks .start').attr('id', function(i,_) {
return 'id-' + (i+1);
});
DEMO

You must take care that id starting with number is not allowed until html 4. So if you not working on html5 then you should add some prefix to id.
try each():
$('div.start').each(function(index, element){
$(this).attr('id',index+1);
});
Here is working demo.

Using jQuery 'id' property, loop through each block:
$(function(){
$.each($('.start'), function(i,e){
e.id = i+1;
});
});
JSFiddle here http://jsfiddle.net/PU2T4/

And one more (DEMO):
$('.start').attr('id', function() { return $(this).index()+1; });

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.

Select all elements with class name start by specific string by jquery

This is my HTML DOM:
<div id="d1" class="Addable"><span class="yak-bak-nak vok-do-maria"> <p>Goola1</p>
<span>volaa</span></span></div>
<div id="d2" class="Addable"><span class="yak-bak-val vok-do-maria"> <p>Goola2</p></span></div>
<div id="d3" class="Addable"><span class="vok-do-maria yak-bak-nak"> <p>Goola3</p></div>
<div id="d4" class="Addable"><span class="vok-do-maria yak-bak-nak"> <p>Goola4</p></div>
<input type="button" class="Doop" value="Do" />
So I want to remove all divs that class names start with "yak-bak" that means all of the above.
so I try this script:
$('.Doop').click(function () {
$('span[class|="yak-bak"]').parent('div').remove();
});
but just d1 and d2 remove and d3, d4 remain because the yak-bak class come as second also I try this:
$('.Doop').click(function () {
$('span[class^="yak-bak"]').parent('div').remove();
});
So what is your suggestion? where is the problem?

To target elements with multiple classes, where one of then starts by "yak-bak" at the beginning of the attribute class, or at the middle of it, you can use:
JQUERY
$("div[class^='yak-bak'],div[class*=' yak-bak']").parent('div').remove();
This will select elements where the class starts by "yak-bak" and elements that contain a class stated by "yak-bak".

$('div').filter(function() {
return $(this).has('span[class^="yak-bak"]');
}).remove();
DEMO
Or
$('div').filter(function() {
return $(this).has('span[class^="yak-bak"], span[class*=" yak-bak"]');
}).remove();
But First one will enough.

Select base elements?

How can I select elements (using jQuery) that do not contain any elements?
For example, in the following tree:
<div class="a">
<div class="b">
<div class="c"></div>
</div>
<div class="d"></div>
<div class="e">Lorem</div>
</div>
Only the <div>s with class c, d, and e will be selected.

$(':not(:has(*))')...
LIVE DEMO
If you want to do it with the filter function, be aware that > element will be deprecated in next jQuery versions!
you can use this:
$('*').filter(function(){
return $('*', this).length == 0
})
:empty selector won't work here because there is text node in the <div class="e">
use :empty selector:
$(':empty')...
docs:
Description: Select all elements that have no children (including text nodes).

Try this:
$('*').filter(function() {
return $(this).children().length == 0;
});
You might also be able to use (faster) native DOM access inside the filter function:
return this.children.length == 0;

nearest ancestor node in jQuery

In my javascript experience, I found that is a very common task "searching the nearest ancestor of an element with some condition (tag name, class,...)".
Can the parents() method of jquery do the job? The order of returned elements of parents() is predictable? Is top-to-bottom or bottom-to-top?
For the moment I use this utility function:
function ancestor(elem, selector) {
var $elem = $( elem ).parent();
while( $elem.size() > 0 ) {
if( $elem.is( selector ) )
return $elem;
else
$elem = $elem.parent();
}
return null;
}
Can someone tell me if there is a clever way to do the job?

Edit: Since jQuery 1.3, this has been built in as the closest() function. eg: $('#foo').closest('.bar');
yep - parents() traverses up the tree.
<div id="a">
<div id="b">
<p id="c">
<a id="d"></a>
</p>
</div>
</div>
$('#d').parents("div:first"); will select div b.

Adding to #nickf's answer:
jQuery 1.3 simplifyed this task with closest.
Given a DOM:
<div id="a">
<div id="b">
<p id="c">
<a id="d"></a>
</p>
</div>
</div>
You can do:
$('#d').closest("div"); // returns [ div#b ]
[Closest returns a] set of
elements containing the closest parent
element that matches the specified
selector, the starting element
included.

You should use closest, because parents won't give you the result you expect if you're working with multiple elements. For instance, let's say you have this:
<div id="0">
<div id="1">test with <b>nested</b> divs.</div>
<div id="2">another div.</div>
<div id="3">yet <b>another</b> div.</div>
</div>
and you want to add a class to the divs that have a <b> element as their immediate child (ie, 1 and 3). If you use $('b').parents('div'), you get divs 0, 1 and 3. If you use $('b').parents('div:first'), you only get div 1. To get 1 and 3, but not 0, you have to use $('b').closest(elem).

closest() starts at current element, if the parent you are looking for has the same tag as current (eg. both are divs), use parent().closest()