Develop Reference

Know which user created div was clicked

I apologise if my explanation is hard to understand.
Using This Code:
names.push(newName);
var strName = newName;
var newName = document.createElement('p')
newName.setAttribute('id', newName);
document.body.appendChild(newName);
newName.innerText = strName;
$(newName).css('position','absolute')
$(newName).css('top', y);
$(newName).css('left', x);
updateXY();
The user creates a new div (with a user-inputted name) which works fine.
my problem is that i don't know how to know when one of these user-crated-and-named divs is clicked.
For example:
if the user created 2 divs, 'hello' and 'goodbye' i couldnt just use $('#hello').click(function() {}); etc. Because i wouldnt know that the user would've chose to create the div entitled 'hello'
Furthermore, the array names has all of the names of all of the divs in - if this is any help to anybody. Thankyou, and any help is appreciated

Simply add the event listener to the element as you did when styling it:
$(newName).on("click",function(){
console.log("element "+$(this).text()+" clicked");
});
JSFiddle
Or, with JS's addEventListener():
newName.addEventListener("click",function(){});
JSFiddle
Or, the old way for older browsers, onclick:
newName.onclick = function(){};
JSFiddle

You could do something like this
$(newName).on("click",function(e){
// the variable 'e' is the event of click, if we do e.toElement, we get to know who the element clicked is
var $thisDiv = $(e.toElement);
// do something with $thisDiv
});

After you create a div element, you need to initialize 'click' event on the div
<a class="js-create-div" href="#">Create Div</a>
$(document).ready(function(){
function init(){
var newUserDiv = $(".js-user-div").not(".js-inited");
newUserDiv.on("click",function(){
alert($(this).html());
});
newUserDiv.addClass("js-inited");
}
$(".js-create-div").click(function(){
$("#wrapper").append("<div class='js-user-div'>"+Math.random()+"</div>");
init();
});
});
https://jsfiddle.net/ema0nazs/

jQuery hiding child element opens its child

Im using a table and rows can have child rows and it can go down a few levels,
what is happening now is that when hiding a child element it then opens that childs child element.
Heres my jQuery:
$(document).ready(function() {
function getChildren($row) {
var children = [], level = $row.attr('data-level');
while($row.next().attr('data-level') > level) {
children.push($row.next());
$row = $row.next();
}
return children;
}
$('.parent').on('click', function() {
var children = getChildren($(this));
$.each(children, function() {
$(this).toggle();
})
});
$(".parent a").click(function(e) {
e.stopPropagation();
})
})
I have set up a jsfiddle so you can see whats happening
https://jsfiddle.net/rhvye8k0/4/
If you click the first "+" you will see what im trying to describe.
Cant think how to sort it out
Update,
have sorted it and updated jsfiddle https://jsfiddle.net/rhvye8k0/5/
There may be a way to reduce the jQuery but it works for now

Your problem is the $(this).toggle(); in .parent's onclick handler. The tr at level 3 has style="display:none", the others don't. toggle() will toggle the receiving element(s) visibility so the others are show (their display is implicitly block) and level 3's is hidden.

Using $(this) instead $('.article') in this code didn't work?

var main = function(){
$('.article').click(function(){
//$('.article').removeClass('current');
$(this).removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
$('.article').dblclick(function(){
//$('.description').hide();
$(this).children('.description').hide();
});
};
$(document).ready(main);
This code is make a table arcodition like this http://www.codecademy.com/courses/web-beginner-en-4hxyb/0/5?content_from=make-an-interactive-website%3Ajquery-events click fullcreen you see that using $(this).removeClass('current') instead $('.article').removeClass('current'). this keyword that reference to the 'article' class why using like that it didn't reference to 'article' class, must using '.artilce'. Can someone explain it, thanks!

here you have a simplified code showing that it works
var main = function(){
$('.article').click(function(){
// below will change all with class article to green
// $('.article').addClass('green')
// with this it only changes the clicked one to green
//$(this).addClass('green');
// below will remove red-class from clicked .article
//$(this).removeClass('red');
//below will remove red-class from all elements with .article
$('.article').removeClass('red');
});
}; $(document).ready(main);
http://jsfiddle.net/tgLckfgz/2/

Child element of tabs is not working

This is the pen I'm working on.
If you will see the pen,the first container have a child div that is not showing in the result.The Jquery as follows,
$('.content-canvas').find('div').hide();
$('.content-canvas div:first-child').show();
$('.tab-button span:first-child').addClass('active');
$('.tab-button').find('span').click(function(){
$('.tab-button').find('span').removeClass('active');
var currentclass=$(this).attr('class');
$(this).addClass('active');
$('.content-canvas').find('div').each(function(){
if($(this).attr('class')==currentclass)
{
$('.content-canvas').find('div').hide();
$(this).slideDown(200);
$(this).children().show(200);
}
else
{
$(this).hide();
}
});
});

First line:
$('.content-canvas').find('div').hide();
Change to
$('.content-canvas > div').hide();
Do the same with all the same selectors you used. You only need to hide the direct descendant, not all divs.
Also, I recommend caching this selecotr into a variable:
var elements = $('.content-canvas > div').hide();
...
...
element.each(function() {
...
and so on, so that you don't have to jump into the DOM everytime.

It's because at the beginning of your js code, you hide every div.
Show it by using something like:
$('.content-canvas .content1 div').show();
Or put your 'as' inside a span instead of a div such as:
<span>as</span>
Please check my fiddle

How do I get the ID of a particular class using jQuery?

I have some div elements having class name hover, these div elements have parent divs having class name hoverparent but the id's of these parent elements are different.
Is it possible to get the ID of respective .hoverparent element while hovering on my .hover div elements?
I tried to get this by:
$('.hoverparent').attr('id')
But it gives the same first parent id every time.
Structure is like:
<div class="hoverparent" id="hover-1">
<div class="hover">ABC</div>
</div>
<div class="hoverparent" id="hover-2">
<div class="hover">DEF</div>
</div>

You need to use the parent or closest functions to traverse up the DOM tree to find the "parent" element you are looking for:
$(".hover").hover(function() {
var $parent = $(this).closest(".hoverparent");
alert($parent.attr("id"));
});
The difference between parent and closest is that the first will only work if the .hoverparent element is the immediate parent of the .hover element; closest will search upwards through all ancestors to find it.

try $(this).parent().attr('id') , in your hover callback.

$('.hover').mouseover(function() {
$(this).parent().attr('id');
});

don't call your class hover. this should work
$(".hover").hover(
function () {
var id = $(this).parent().attr('id');
});

Add each loop like this :
$(".hoverparent").each(function(){
var id=$(this).attr("id");
alert(id);
});

Use the parent method in the handler for the hover event:
$('.hover').hover(function(evt){
var par = $(this).parent().attr('id');
//Now do with ID what you need
},
function(evt){
//presumably you don't need anything for mouseout
});

You can try the parent() method.
Like this:
$('a').click(function(){
var parentId = $(this).parent('div.hoverparent').attr('id');
});

Try the following:
$('.hover').hover(function() {
var parentID = $(this).parent().attr('id'); alert(parentID);
});

$(".hover").hover(function(){
console.log($(this).closest(".hoverparent").attr("id"));
});
here is the fiddle http://jsfiddle.net/9dJJ9/1/show/