Develop Reference

Jquery select the element h3

How can I select element in this HTML using jquery selectors.
<div class = 'divOne">
</div>
<div class = 'divTwo">
<h3>Title</h3>
</div>

$('.divOne').siblings('.divTwo').children('h3')

$(".divOne") to perform jquery functions on first div
$(".divTwo") to perform jquery functions on second div
$("h3") to perform jquery functions on header element

It's pretty simple to select the h3 element.
But you have to fix your HTML first. While, when writing HTML5, in general it's possible to use single-quotes. But, you have to use them at the start and the end of the value like this: <div class='divOne' /> or <div class="divOne" />
$('.divTwo > h3').css('border', '1px solid red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divOne">
</div>
<div class="divTwo">
<h3>Title</h3>
</div>

You could use the jQuery selector and select h3 with $('h3'). But maybe you have more than one h3-tags in your code.
In that case you could give the h3 a class and select the class with the selector.
Example:
<div class = "divOne">
</div>
<div class = "divTwo">
<h3>Title</h3>
</div>
In this case use: $('h3');
OR
<div class = "divOne">
</div>
<div class = "divTwo">
<h3 class="myClass">Title</h3>
</div>
And in this case you use $('.myClass');
-----------
In the above I explained how you could select an h3-tag, but it does work with all elements ofcourse ;)
I also noticed that you use single quotes and double quotes in your HTML ('divOne")
Do not use both for a single attribute. Just "divOne" or 'divOne'.

jQuery - How to hide an element and its children?

I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?

You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();

What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".

$('.row').hide();
please remove second class

From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle

How to get ID, Name and Class of Extreme DIV from button click using JQuery?

How to get ID of extreme parent div?
<div class="panel" id="Kudapanel"> //Extreme Div
<div class="Kudapanel1" id="Kudapanel1">
</div>
<div>
<div>
<input type="button" id="yo"> //In much nestings
</div>
</div>
</div>
Take two use cases:
if panel classname is there in extreme div, then how to get ID of div?
if panel classname is not there, then how to get ID of parent div?
I tried:
$("#yo").click(function(){
alert($(this).closest('div').attr('id'));
});
Please do not use parent().parent().parent(), as extreme div location could be different at multiple places

Try using the class selector:
$("#yo").click(function(){
alert($(this).closest('div.panel').attr('id'));
});
If you do not have the class we need to see the parent html where this will be located in order to give you a solution.
UPDATE
A solution if the class is not defined is to use another tag, instead of div use section for the upper parent tag.
<section id="Kudapanel"> //Extreme Div
<div class="Kudapanel1" id="Kudapanel1">
</div>
<div>
<div>
<input type="button" id="yo"> //In much nestings
</div>
</div>
</section>
$("#yo").click(function(){
alert($(this).closest('section').attr('id'));
});

If you can count on the level of nesting, then you can just go up the parent chain until you get to it
$('#yo').on('click', function(){
alert($(this).parents().eq(2).prop('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="Kudapanel"> //Extreme Div
<div class="Kudapanel1" id="Kudapanel1">
</div>
<div>
<div>
<input type="button" id="yo"> //In much nestings
</div>
</div>
</div>
Otherwise you should go with #Mivaweb's answer

Adding attributes to all html tags

I want to add id="draggable" attributes to all tags.
For example -
<img src="http://sample.jpg"> should change to <img src="http://sample.jpg" id="draggable" >
<p>abcd</p> should change to <p id="draggable">abcd</p>
This should apply to all tags except <HTML><HEAD><script><style>
Any suggestion?

Use class instead of Ids
var elems = document.body.getElementsByTagName("*");
elems.setAttribute("class","draggable");

ID(s):
Each element should only have one ID
Each page can only have one element with that ID
CLass(s):
You can use mutliple classes on one element.
You can use the same class on multiple elements

Adding same id to all the HTML elements is not a good way. Better to have same class name. Dynamically, if you want to add same class to all the elements, you can do something like below
$('#parent').find('*').addClass('draggable');
http://jsfiddle.net/663m8qyd/
<div id='parent'>
<p>ABC</p>
<img src='http://www.w3schools.com/tags/smiley.gif' alt="Smiley face"/>
<div id='child'>
<div id='child1'>test1</div>
<div id='child2'>test2</div>
</div>
</div>
To add draggable class to all the elements inside parent div, find each element and add respective class.
Hope that helps!

Difference between these 2 selectors? [duplicate]

This question already has answers here:
Difference between these selectors [duplicate]
(2 answers)
Closed 8 years ago.
In a web page, there are multiple div elements, some of which have a class of 'class1'.
Question: Will both the below selectors give us all div elements having a class of class1?
$("div .class1")
$("div.class1")

The first one will select an element that has the class class1 that is a descendant of a div.
<div>
<p class="class1">text</p> <-- selected
</div>
The second one will select a div that has the class class1.
<div class="class1"> <-- selected
<p>text</p>
</div>
Will both the below selectors give us all div elements having a class
of class1?
No, only the second one, $("div.class1"), will. In both jQuery and CSS, a space in front of a class means that you are looking for a descendant element with that class.

The two selectors do very different things.
This selector:
$("div .class1")
will return any element (regardless of element type) which has a class of class1 and is a descendant (immediate or otherwise) of a div (regardless of that div's class, if any).
This selector:
$("div.class1")
will return any div which has a class of class1.

The first selector gives you all the .class1 elements that are descendants of any <div> element.
The second will give you all the .class1 elements that are actually <div>s themselves.

Nop.
The first one will give you elements in div which have class class1 and the second one will give you the div with class 'class1`.

The difference between the to selectors you've posted is the element hierarchy.
Lets say that you have a code like this:
<div class="class1">
This is a div with class name class1
</div>
<div>
This is a div with no class name</div>
<span class="class1">This is a span with class name class1</span>
<div class="class1">
This is a div with class name class1
</div>
<div>
This is a div with no class name
<p class="class1">This is a paragraph with class name class1</p>
</div>
<div class="class1">
This is a div with class name class1
</div>
<div class="class1">
This is a div with class name class1
<div class="class1">
This is a div with class name class1
</div>
</div>
The selector $("div .class1") will return you all the elements inside of <div> element which has the class name class1. In our example, that would be <span class="class1">...</span>, <p class="class1">...</p> and the last div <div class="class1">...</div>
whereas the selector $("div.class1") will return you all the elements of <div> which has the class name class1. In our example, that would be all instances of <div class="class1">.
here's a fiddle to help you understand more: http://jsfiddle.net/fatgamer85/m99onozo/1/
hope this helps.