Develop Reference

How to get specific div through this?

I build a method that allow me to return the clicked element by the user, something like this:
$('#button2').on('mouseover', function()
{
console.log(this);
}
this return:
<tr id="res-7" class="entry border-bottom" rel="popover" data-original-title="" title="">
<td style="padding-left: 10px">
<div class="name"><strong>Test</strong></div>
<div class="description">Foo</div>
</td>
</tr>
essentially my target is get the content of div name and div description, someone could explain how to do this? Thanks.

Something like this: jsfiddle
$(document).on("mouseover","tr", function(){
var name = $(this).find(".name").text();
var description = $(this).find(".description").text();
console.log("Name: "+name+"\nDecsription: "+description);
})
Don't forget ID of each element must be unique so your code is not correct because "#button2" must be unique, so this is always #button2 in your function.
Note the difference between text() and html(). I used .text() to get just the text without "strong" code. If you need it use html().

You could use innerHTML
$(this).find('name').innerHTML; //returns "test"
$(this).find('description').innerHTML; //returns "foo"
This will find the class within the current element, and return the values you need.

Since you already have an id on your element, accessing the name and description attributes is easy:
$('#button2').on('mouseover', function() {
var $res7 = $('#res-7');
// Access the two divs
var name = $res7.find('.name').text(); // or .html()
var description = $res7.find('.description').text(); // or .html()
// Print them out
console.log(name);
console.log(description);
});
Of course, this block of code should be inside a jQuery ready event handler.

I'm sure there is a cleaner way, but this should get you what you want.
$('#button2').on('mouseover', function()
{
console.log($(this).find(".name").html());
console.log($(this).find(".description")).html());
}

How to use the title attribute of a div to add a class?

I'm trying to add a class to a div by using the title attribute. Currently the alert is correct. However the class isn't added.
JS Part:
function index(clicked_id){
alert(clicked_id);
$('#sticky').attr("title", +clicked_id).addClass("glow");
}
HTML Part:
<div id="sticky" class="" title='sticky1' onclick='index(this.title)'</div>"

I don't know if I got your question right but I understood that you want to filter|find you div by the title. So maybe this code will help you:
function index(clicked_id){
alert(clicked_id);
$('#sticky [title="' + clicked_id + '"]').addClass("glow");
}

This is how I would do it:
$("[title*='sticky']").click(function(){
$(this).addClass("glow");
});
Here is the JSFiddle demo

Why do you need to do it like that? Can't you just set the class on the element clicked?
JavaScript
function index(el){
$(el).addClass("glow");
}
HTML
<div id="sticky" onclick='index(this)'></div>

Instead just pass this:
onclick='index(this)'
now in the function:
function index(el){
var e = $(el).attr('title');
$('#sticky[title="'+e+'"]').addClass("glow");
}
As the element itself is the target one then just use this:
function index(el){
$(el).addClass("glow");
}
or better to go unobtrusive, remove the inline event handler and use this way:
$('#sticky').on('click', function(e){
$(this).addClass("glow");
});

js at Question returns expected results. Missing closing > at html #sticky <div> tag at
onclick="index(this.title)"
following onclick attribute . Additionally,
+
should be removed at
+clicked_id
at .attr() setting title . javascript + operator attempting to convert clicked_id String to Number when placed before string
function index(clicked_id){
alert(clicked_id);
$('#sticky').attr("title", clicked_id).addClass("glow");
}
.glow {
color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="sticky" class="" title="sticky1" onclick="index(this.title)">click</div>

How to create element with class name using javascript?

How to create element with class name using javascript ?
i tried to create element like this
<div class ="dialog_red_top_page">
<div class ="inner_dialog_red_top_page">
<p class="dialog_red_top_page_text">
test
</p>
</div>
</div>
by using javascript but not work , how can i do that ?
http://jsfiddle.net/n5phf/186/
<script type="text/javascript">
$(window).load(function(){
$('#myBtn').click(function(){
var div = $('<div class ='dialog_red_top_page'><div class ='inner_dialog_red_top_page'><p class='dialog_red_top_page_text'>test</p></div></div>');
div.html("test");
div.appendTo('#wrapper');
});
});
</script>

1st : the problem with quotes use " around class instead of single one
2nd : with div.html("test"); you change the div html to <div>test</div>
you can use .html() for wrapper
$('#myBtn').click(function(){
var div = $('<div class ="dialog_red_top_page"><div class ="inner_dialog_red_top_page"><p class="dialog_red_top_page_text"">test</p></div></div>');
$('#wrapper').html(div);
// you can try .append instead of .html() just give it a try
//$('#wrapper').append(div);
//$(div).appendTo('#wrapper');
});
Working Demo

Your quotes are all singel quotes
Do it like this
var div = $('<div class="dialog_red_top_page">'
+ '<div class="inner_dialog_red_top_page">'
+ '<p class="dialog_red_top_page_text">test</p>'
+ '</div></div>'
);

Wrap the classes name by " instead of ' and remove div.html("test");. It says replace html of selected element by test it means it removes .inner_dialog_red_top_page and replace it by test.
Jsfiddle

Escape all ' characters with a \':
var div = $('<div class =\'dialog_red_top_page\'><div class =\'inner_dialog_red_top_page\'><p class=\'dialog_red_top_page_text\'>test</p></div></div>');
What your code actually does is: creates a div with div and paragraph inside, but then you call:
div.html("test");
which overrides content of .dialog_red_top_page div.
jsfiddle

your code should be like this:
$('#myBtn').click(function(){
$("<div class ='dialog_red_top_page'><div class ='inner_dialog_red_top_page'><p class='dialog_red_top_page_text'>test</p> </div></div>").appendTo('#wrapper');
});

How to check if any div has inner div having specific class say 'xyz' using javascript?

<div class="abc">
<a><img></a>
<h4></h4>
<div class="xyz">
Hello
</div>
</div>
in above html code how do i check whether div having class abc has div having class xyz.

You can simply do this:
var list = document.querySelectorAll('div.abc div.xyz');
if (1 == list.length) {
alert("found");
}
Here's a demo: http://jsfiddle.net/3xQ5X/

Using JQuery:
$("div.abc").has("div.xyz");

Try something like this:
Get your parent div an id like abc.
var v = document.getElementById('abc');
for(var i in v.children)
{
if( v.children[i].nodeName == 'DIV')//this will tell if the parent div has children divs
{
console.log(v.children[i].className == 'xyz');//this will be true if the child div has a class named xyz.
}
}
Also remember to modify this script according to your requirement. I mean you can give an specific class in place of id to the divs you want to traverse. To select all the divs containing some specific class, use this link's function.

This script will do the needful.
<script type="text/javascript">
$(document).ready(function(){
if($("div.abc").children('div').hasClass("xyz"))
{
alert("found");
}
});
</script>

jQuery toggle() text in separate element

I am having some trouble getting a toggle function to work and need someone to help explain it to me.
My HTML (simplified):
<div id="filter_names"></div>
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
<div class="item">Option 4</div>
My jQuery (simplified)
$(".item").click(function(){
var tagname = $(this).html();
$('#filter_names').append(' > '+tagname);
$(".loading").show();
});
As you can see I am appending clicked items' value to the div at the top. This works fine, but i need it to be removed when i click it again.
I am pretty sure it needs a toggle() function but so far my attempts have been pretty fruitless.
Some guidance would be greatly appreciated.
EDIT: You can see what i want to achieve in this JSfiddle. It's working exactly how i want it to by appending a value to the end (like a breadcrumb link), but is not being removed when i click it again.

You need to look at the #filter_names contents and check if the clicked tag's value is already included, then remove it if it is, or add it otherwise:
if (filternames.indexOf(tagname) === -1) {
$('#filter_names').append(' > '+tagname);
} else {
$('#filter_names').text(filternames.replace(' > '+tagname, ''));
}
Working fiddle: http://jsfiddle.net/passcod/Kz3vx/
Note that you might get weird results if one tag's value is contained in another's.

<script type="text/javascript">
$(function(){
$(".item").click(function(){
var $this=$(this);
var tagname = ' > ' +$this.html();
//if has item-check class remove tag from filter_names
if($this.hasClass("item-click")){
var h=$("#filter_names").text();
$("#filter_names").text(h.replace(tagname, '' ));
}
else{
$('#filter_names').append(tagname);
}
$(this).toggleClass("item-click").toggleClass("item");
});
});
</script>

try this one...
$(this).toggleClass("item-click item");
this will add these classes alternatively when you click on div. or if you just want to remove this class on second click then you should write this in your click handler.
if( $(this).hasClass("item-click")){
$(this).removeClass("item-click");
}
EDITED -----
to remove appended html you can try this...
if($(this).hasClass("item-click")){
$("#filter_names").text("");
}
else{
$('#filter_names').append(tagname);
}
it's working HERE
hope this helps you!!

I like passcod's solution - here's an alternative that wraps the elements in divs and puts them in alphabetical order.
JSFiddle here. The sort function is from http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/.
$(".item").click(function(){
var tagname = $(this).html();
var target = $('#filter_names').find('div:contains("> ' + tagname + '")');
if (target.is('*')) {
target.remove();
}
else $('#filter_names').append('<div class="appended"> > '+ tagname +'<div>');
function sortAlpha(a,b) {
return a.innerHTML > b.innerHTML ? 1 : -1;
}
$('#filter_names div').sort(sortAlpha).appendTo('#filter_names');
});