Develop Reference

Merge jquery code with several classes and ids

I have lots of repeated Jquery code with small differences. I wonder if its possible to merge the following Jquery code into one:
$(".dropdown-menu-attributes li a").click(function(){
$("#modal-button-attributes:first-child").text($(this).text());
});
$(".dropdown-menu-operators li a").click(function(){
$("#modal-button-operators:first-child").text($(this).text());
});
$(".dropdown-menu-and-or li a").click(function(){
$("#modal-button-and-or:first-child").text($(this).text());
});
I tried this but doesn't work for the second and third classes.
$(".dropdown-menu-attributes .dropdown-menu-and-or .dropdown-menu-operators li a").click(function(){
$("#modal-button-attributes:first-child #modal-button-operators:first-child #modal-button-and-or:first-child").text($(this).text());
});

You want to use the , (Multiple Selector) selector:
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
to first find those three elements, and then on the result set you would do another search to find the li a. The final code would look that way:
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
.find('li a')
.click(function(){
});
To get the correct id you would need to store that id somewhere. One way would be to add it to the corresponding element that holds those classes using the data-* attribute. And search for that using closest
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
.find('li a')
.on('click', function(e) {
var id = $(this).closest('[data-modal-button-id]').data().modalButtonId;
console.log('#modal-button-'+id+':first-child');
$('#modal-button-'+id+':first-child').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu-attributes" data-modal-button-id="attributes">
<ul>
<li><a>test1</a></li>
</ul>
</div>
<div class="dropdown-menu-and-or" data-modal-button-id="and-or">
<ul>
<li><a>test2</a></li>
</ul>
</div>
<div class="dropdown-menu-operators" data-modal-button-id="operators">
<ul>
<li><a>test3</a></li>
</ul>
</div>
How you want to name the data-* attribute depends on you, there is most likely a better name for that.
In general I would choose another setup and use a common class instead
$('.dropdown-menu li a')
.on('click', function(e) {
var id = $(this).closest('.dropdown-menu').data().modalButtonId;
console.log('#modal-button-'+id+':first-child');
$('#modal-button-'+id+':first-child').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu dropdown-menu-attributes" data-modal-button-id="attributes">
<ul>
<li><a>test1</a></li>
</ul>
</div>
<div class="dropdown-menu dropdown-menu-and-or" data-modal-button-id="and-or">
<ul>
<li><a>test2</a></li>
</ul>
</div>
<div class="dropdown-menu dropdown-menu-operators" data-modal-button-id="operators">
<ul>
<li><a>test3</a></li>
</ul>
</div>

jquery, move element to closest div

I want to move some span elements to closest div. I found the solution to my problem but it does not work for me. I have some Html code:
<ul>
<li>
<a><span>Some info</span></a>
</li>
<div class="cl1">...</div>
<li>
<a><span>Some info 2</span><a>
</li>
<div class="cl1">
...
</div>
...
</ul>
and to move <span> like this:
$('span').each(function () {
$(this).parent().parent().closest('.cl1').append(this);
})
but nothing happened. Any help would certainly be appreciated

you can't put a div in a ul, only li's.
your html has to be valid (a's, ul need to be closed)
Closest searches anscetors, not siblings.
since your markup is not valid as is, i'm not sure if you want the divs in the list or not. This example removes them from the lis, which breaks the list into two lists.
$('button').click(function() {
$('span').each(function() {
var $div = $(this).closest('ul').siblings('.cl1');
$(this).clone().appendTo($div);
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a><span>Some info</span></a>
</li>
</ul>
<div class="cl1">...</div>
<ul>
<li>
<a><span>Some info 2</span></a>
</li>
</ul>
<div class="cl1">...</div>
<button>Do Stuff</button>

Refer to nested HTML elements with jQuery

I have some extensive HTML element in the following (simplified) format:
<div id="firstdiv" class="container">
<ul>
<li id="4"> <a title="ID:4">Tree</a>
<ul>
<li id="005"> <a title="ID:005">Leaf Tree</a>
<ul>
<li id="10"> <a title="ID:10">Fruit Tree</a>
<ul>
<li id="0050338"> <a title="ID:0050338">Apple Tree</a>
<ul>
<li id="399"> <a title="ID:399">Green Apple Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="005"> <a title="ID:005">Conifer</a>
<ul>
<li id="10"> <a title="ID:10">Pine Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I want to access the value of the title attributes of all a-tags inside the div-container with the id="firstdiv" on click.
I tried the following jQuery function but it didn't work:
$("#firstdiv").children("a").on('click', function () { /*some code here*/ });
Any ideas what I'm doing wrong?

children() only goes one deep try find()
$("#firstdiv").on('click', function () {
$(this).find('a').each(function(){
console.log($(this).attr('title'))
})
});
will get all a tags titles when the #first_div is clicked
$("#firstdiv a").on('click', function () {
console.log($(this).attr('title'))
});
will get the title of the a tag you clicked on

children() does what it says, looks at child nodes only - not descendant nodes also. For that, you need find(). However, you need neither in your case, just a change to your selector.
$('#firstdiv a')
As with CSS, a space in the selector denotes a child OR descendant.

According to the jQuery documentation
The .children() method differs from .find() in that .children() only
travels a single level down the DOM tree while .find() can traverse
down multiple levels to select descendant elements (grandchildren,
etc.) as well
So change your selector to:
$("#firstdiv").find("a").on("click", function () {});
This will search everything beneath #firstdiv in your DOM tree.

Or even:
$('#firstdiv a').click(function(){
... do stuff
});
That will select all 'a' elements within #firstdiv

Try this http://jsfiddle.net/ApfJz/22/
$("#firstdiv a").on('click', function () { alert($(this).attr('title')); });

Demo
$(document).ready(function() {
$('#firstdiv a').click(function(){
alert($(this).attr('title'))
});
});

$("#firstdiv").find("a").on('click', function () {
});

changing value of unordered list when selecting li item

My question is, how do i change value of original element in UL list, after selecting/picking one li item under.
Example: I want to pick City3 and when i do, instead of "Pick City" it should be the value of "city3".
This is my jsfiddle.
This is HTML:
<div class="menu1">
<li class="naslov"><b>Pick City</b></li>
<div class="submenu1">
<ul id="sel">
<li value="1"><b>City1</b></li>
<li value="2"><b>City2</b></li>
<li value="3"><b>City3</b></li>
<li value="4"><b>City4</b></li>
<li value="5"><b>City5</b></li>
</ul>
</div>
Also is it possible not to change any of the css/html(With that i mean, i dont want to add select,option elements), and make it work just over some JQuery/JS functions?
Thanks,
Milos

$('#sel a').click(function(){
$('li.naslov b').html(this.innerHTML);
return false;
});
Live DEMO

Try this as your JS...
$(document).ready(function(){
$('.menu1').hover(function(){
$('.submenu1').stop(true).slideToggle('slow');
});
var orig = $(".naslov").html();
$("#sel li").hover(function(){
$(".naslov").html($(this).text());
}, function(){
$(".naslov").html(orig);
});
});

Another possible way to do this. In this case, the li could be dynamic, based on an AJAX feed or some other JavaScript.
$('#sel').on('click','li',function() {
$('li.naslov b').text($(this).text());
});
jsFiddle

Removing mark-up from unordered list with jquery

In the follow content I need to remove the mark-up tags <div class="sub"> and </div> but not it's content with jquery. This is to adapt the menu to a responsive layout.
<nav id="top">
<ul>
<li class="ti" id="snw"> <a class="mm" href="/snowdepth/">Weather</a>
<div class="sub">
<ul>
<li><h2>Snowline</h2></li>
<li>Nordliche Ostalpen</li>
</ul>
</div>
</li>
<li class="ti" id="blg"> <a class="mm" href="/live/">Weblog</a></li>
</ul>
</nav>

Try unwrap():
​$('.sub').find('ul').unwrap()​;
Essentially, you are looking for all the child elements of .sub, and unwrapping them or removing their parent.
Here's the demo: http://jsfiddle.net/yEseX/

You can do it this way.
Live Demo
$('.sub').parent().html($('.sub').html());

Supposing you may have more than one div with class sub, I'd suggest this :
var container = $('#top');
container.html(
container.html().split('<div class="sub">').join('').split('</div>').join('')
);

Try this,
var content = $(".sub").html(); // stored ".sub" div content
$(".sub").remove(); // remove ".sub" div
$("#top #snw").after(content); // insert content where you want

Try this:
var list = $('#snw');
var html = list.html();
list.html(html.replace('<div class="sub">','').replace('</div>',''));
Demo here

I think #Abhilash's answer is the neatest so far, but I would modify the selector slightly:
$('.sub').contents().unwrap();
This removes all of the .sub elements, leaving their contents in place.
JsFiddle: http://jsfiddle.net/yEseX/2/