We Keep Coding

How to add an id to an existing div on click in css/js?

I'm new to html/css/js and I'm working on a small project where I have a few divs with the same classnames, for example:
<div class="imgBox">
Something here...
</div>
None of them have an unique id. What I want to do is to add an id to a single div after I click on it. It would allow me to modify the selected div and make it in css fullscreen or something like that.
Do you have any ideas how to create a function in js for it?
I couldn't find a proper solution on the internet, but if I missed something, let me know.

Not entirely sure of your logic for wanting to add the IDs after the element is created, but this would add the ID attribute when you click the div.
var global_id = 1;
// click on div
$('.imgBox').on('click', function(e){
existingID = $(this).attr('id');
if (typeof existingID == 'undefined'){
$(this).attr('id', global_id);
global_id++;
}
});

How use "display:none" with jquery or javascript?

I have the following HTML code:
<div id="ThanksWebPart" class="ThanksWebPartDisplay">
</div>
I want to be able to hide this <div> tag. I want to remove display:none if I'm on the previous page.
How do I remove display:none if I have a different location address?

With jQuery, use toggle() :
$('#ThanksWebPart').toggle(); // toggle again to make it appear again.
With Javascript, use the style.display property :
getElementById("ThanksWebPart").style.display = 'none'; //'block' to make it appear again.

$("#ThanksWebPart").css("display", "none"); to hide.
$("#ThanksWebPart").css("display", "block"); to show.
Alternatively, you can also use .show() and .hide().

Element not reacting to JQuery Click

I have added Elements using Jquery inside PHP after loading them from the database. Each button has two classes, one controlling the GUI and another controlling the Click for particular button. The code is as under
echo "<script type='text/javascript'>$('.main').append('<button class=b_ui b$index>Change</button>'); </script>";
Now if I check the classes from Inspect Element perspective of the browser, it shows 2 classes. But when I click on it and get class of element using this code
$('.b_ui').click(function()
{
cls = $(this).attr('class');
alert('no. '+cls);
}
It shows only first class (GUI) and not the other which I want to use for handling click.
Any help ?

Put quotes around the class attribute. <button class=\"b_ui b$index\">Change</button>

You should use "on" method:
$(document).on('click', '.b_ui', function() {
cls = $(this).attr('class');
alert('no. '+cls);
});

When adding elements dynamically to the DOM, they are not accessible by jQuery like an element which was there at page load. say you have this div:
<div id="div"></div>
and you add some content with jQuery so it now looks like this:
<div id="div"><span id="span"></span></div>
you cannot refer directly to the span using jQuery with $('span[id=span]'), you have to target a containing element then filter which contained element you want:
$('#id').on('click','span',function(){});

jQuery: Hide div with no ID

How can I hide a div with no ID? I have an application which creates few stickies. Some of them have no ID and some of the do have. How can I hide the ones with no ID?
The position is not always the same.
This is what I get in the HTML where I want to hide the last one.
Is it possible I can hide the one with no ID? Note that the rest which have ID's, is a number generated randomly.
Thanks alot.

Try this:
$("div.sticky:not([id])").hide();
The main idea is to use :not([id]) selector with element selector.
fiddle: http://jsfiddle.net/57uQ8/

http://sandbox.phpcode.eu/g/d2956/2
<script>
$(function(){
$("div.sticky").each(function(b){
if (!$(this).attr('id')){
$(this).hide();
}
});
});
</script>
will probably do it, assuming you want to show ONLY divs with no IDS and divs with class sticky

jquery select class inside parent div

I'm trying to change the alt of the image, I'm clicking by
selecting the image's class (add_answer)
Note: .add_answer shows up multiple times inside different containing div's
jQuery(function(){ // Add Answer
jQuery(".add_answer").click(function(){
var count = $(this).attr("alt");
count++;
$('.a_type_'+count+'').show();
$(this).parents("div:first").$('.add_answer').attr("alt", count);
});
});
This line doesn't seem to be working, how do I select this add_answer class by way of it's parent div
$(this).parents("div:first").$('.add_answer').attr("alt", count);
Anyone else have an idea?
I'm trying having trouble decreasing the alt value on the .add_answer image when .destroy_answer is clicked
jQuery(function(){ // Hide Answer
jQuery(".destroy_answer").click(function(){
$(this).parents("div:first").hide();
var count = $('.add_answer').attr("alt");
count--;
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
});
});
Problem line:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);

you can use the parent div as the scope:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);

This should work:
$(this).parent("div").find(".add_answer").attr("alt", count);

You code is almost correct. Required change is to use .find instead of .$ after .parents method. Use of .parent instead of .parents should be avoided, this way your code will be more unobtrusive (precisely - this way img can be non-direct child of the div).
$(this).parents('div:eq(0)').find('.add_answer')
You can manipulate :eq(0) to select eg third parent div using :eq(2).