We Keep Coding

alert div id when click on div

I created new website and on it I want when I click on one div jquery show me div ID and I user this command and I can give div ID
var name = $(this).attr("id");
and when I want to give div's child I use this Command
var name = $(this).children(".select").attr("name");
now I have 3 divs like this
enter image description here
and when I click on div 3 Jquery give me div2 with this command
var name = $(this).children(".select").attr("name");
how can I get div's ID when click on it?
example click on div 1 show me div 1 or when I click on div 2 show me div 2
and when I click on div 3 show me div 3
Thanks

Your first code was correct, you don't need to find children...
$("div").click( function(){
var name = $(this).attr("id");
console.log( name );
});
If you have trouble with multiple events, you can stop propagating the click event with .stopPropagation() like so:
$("div").click( function( e ){
var name = $(this).attr("id");
console.log( name );
e.stopPropagation();
});
See example: https://jsfiddle.net/tg4rmkk9/

You've already solved the main part of the problem:
var name = $(this).attr("id");
This will get you the ID of the Div.
To alert it you can then do alert(name);

Here's a demo of what I think you're going for :
$('[id^=div]').on('click', function() {
alert($(this).attr('id'));
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="div1">
Click me
</div>
<div id="div2">
Click me too
</div>
<div id="div3">
Click me three
</div>
(see also this Fiddle)

jQuery click event handle both class element and element inside

I have the following HTML:
<div class="eventContainer" id="dennaVecka" style="background-color: #2B4699;">
<p>Denna vecka</p>
</div><!--eventContainer ends-->
<div class="eventList" id="dennaVecka_table">
...
</div>
And the following jQuery:
eventID = null;
$('.eventContainer p, .eventContainer').click(function (e) {
//eventID = $(this).attr('id');
eventID = e.target.id;
$('.eventList#' + eventID + '_table').fadeIn(300);
//alert(e.target.id);
});
I want: When div class eventContainer or the paragraph inside it is clicked, I want to use the ID of eventContainer (id="dennaVecka") to display the div class eventList beneath it. My problem with the current setup is that I don't know how to get the ID of eventContainer if the paragraph is clicked. If I click the paragraph I will get the ID of the paragraph ("undefined").
Is there a way to get the ID of eventContainer in jQuery no matter if I click the div or the paragraph?
Maybe I should setup the HTML in another way?

Use the fact that click event bubbles up to the parent container. In this case you can bind only one event handler to .eventContainer and read this.id to get container id:
$('.eventContainer').click(function (e) {
eventID = this.id;
$('.eventList#' + eventID + '_table').fadeIn(300);
});
So if you click p element inside .eventContainer event will still be handled by above listener on .eventContainer, with this pointing to it.

Getting the root parent using jQuery

HTML
<div id="header_area">
<div id="favuorites_header_wrapper" class="header_item">
<div id="favuorites_header_font" class="noSelect">Open Menue</div>
<div id="favuorites_header_icon" class="noSelect"></div>
</div>
</div>
In the above code, favuorites_header_wrapper is the children of header_area. And
favuorites_header_font, favuorites_header_icon are childrens of favuorites_header_wrapper.
Now, using jQuery, i want to alert the root parent (i.e header_area) whether you are clicked on children or grand children of the header_area. Thanks for your effort.
EDIT: I want to get the ID of the container div(i.e header_area) whenever you clicked on the elements inside it.
I'm using
alert((e.target || e.srcElement).parentNode.id);
But it is returning the respective parent not the Container Div ID.

Use .closest()
$('#header_area div').click(function() {
var parent_header_area = $(this).closest('#header_area');
});
or use .parents()
$('#header_area div').click(function() {
var parent_header_area = $(this).parents('#header_area');
});

You can use:
$("#header_area").find();
This wil return all children and subchildren.
You can then add a click-handler to the found elements.
Explanation can be found here

I'm not sure what you mean by 'alert the header_area', but you can select it using closest():
$('#header_area div').click(function() {
var $header_area = $(this).closest('#header_area');
// do something eg. alert the id...
alert($header_area.prop('id'));
});

$('.header_area div').click(function() {
alert($(this).parents('.header_area'));
});

Try this way:
$('[id^="favuorites_header"]').click(function(e){
e.stopPropagation();
var parent = $(this).closest('[id^="header_"]').attr('id');
alert(parent);
});
Fiddle

how to get element id of div and appendChild html to it

I want to get the ID of a div using JavaScript that runs inside that div. I want to appendChild() html to that div.
eg:
<div id="randomnumber">
<script type="text/javascript">
var htmlcontent = "abcdf";
//need the id of div holder
var thisDIVid= ?????;
// appendChild to this div
?????.appendChild(htmlcontent);
</script>
</div>

If you know where in the structure your div is placed you can access it like this:
var mainDiv = document.getElementById('mainDiv');
yourDiv = mainDiv.getElementsByTagName('div')[number];
number is the place in the structure

document.getElementyById("yourDivId"); will find any div with an unique ID.
var div = document.getElementyById("yourDivId");
div.appendChild("yourContent");

selecting div that contains div with a certain value

I have several outer divs, all of them contain 3 inner divs class1 class2 class3. I want to select the outer div based on the value attribute of its inner div that has class1. For example, I want to select the first div because its class1 div has value x. How do I do this with jquery?
<div> <-----this is the div I want to select
<div class="class1" value="x"></div>
<div class="class2" value="y"></div>
<div class="class3" value="z"></div>
</div>
<div>
<div class="class1" value="a"></div>
<div class="class2" value="b"></div>
<div class="class3" value="c"></div>
</div>

My first thought was:
$('.class1[value="x"]').parent();
But I wasn't sure of the syntax (edit: it works). This, however, could work as well:
$('.class1').filter(function() {
return $(this).attr("value") == "x";
}).parent();
Note however, these will only return the first parent (in the case of multiple child divs having a matching "value" attribute). If you want to do something with multiple parent matches, you could iterate through the result with $.each and look at them individually:
$('.class1[value="x"]').each(function() {
var parent = $(this).parent();
});

$('div').has('div[value=x]');
demo
$('div:has([value=x])').closest('div');
demo 2
$('div[value=x]').parents('div');
demo 3
$('div>div[value=x]').parent('div');
demo 4
$.fn.getChildVal = function(val){
$('[value='+val+']').parent().css({background:'red'});
};
$('div').getChildVal('x');
plugin :)
From the docs:
http://api.jquery.com/closest
http://api.jquery.com/has

Another way is to use :has selector
var elem = $('div:has(.class1[value="x"])');

You can do it so.
$(document).ready(function () {
$("div.class1 [value='x']").parent('div');
});