Develop Reference

How to select specific element without using id or classes

I am trying to create a on-click function for each button, hence i need a way to select each one individually without using ids
<div class="col">
<div>
<b>Name:</b> <span>John</span> <button>change</button>
</div>
<div>
<b>Surname:</b> <span>Doe</span> <button>change</button>
</div>
<div>
<b>Email:</b> <span>doe#gmail.com</span> <button>change</button>
</div>
<div>
<b>Birth date:</b> <span>13 May 1947</span> <button>change</button>
</div>
</div>

You have a lot of selector that you can use if you don't want to use class or ids, even though I highly suggest you to use them whenever possible for the sake of comprehensibility.
Here, you could use the :nth-of-type(selector) like this.
// Select the first button of your page.
document.querySelector('button:nth-of-type(1)');
// Select the first button of your .col
document.querySelector('.col button:nth-of-type(1)');

Here is a list of selectors you can use
div b ~ button
div button
.col div button
You can try the selectors here: http://try.jsoup.org/~91Zdheyo7rX9PpORdECPjMxb890

How to add content on a specific point inside a div

Say I have a div with an id (main comment) and more divs underneath with reply id's. I want to dynamically add the content of the comment to the end at the end of the replies. I can't grab the id of the last reply, but I can grab the id of the main comment (which is also the id of the commentbox which is always at the end. Something like this:
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
I want to add content inside commentArea right before replyToComment_'.id.' ...
I had an idea that probably works and looked like this (I was thinking maybe there was some easier way to do it).
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="newReply"></div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And just add and empty div of newReply at the end of every reply posted...
Any other ideas?

.appendTo() of jQuery is what you need:
http://api.jquery.com/appendto/

Ok I thought about few ways to achieve this goal... "If i understand correctly what you were trying to ask"
By this way you do not need even to use ID as a class.... unless there is a specific reason to this?!?!
If not then move the id to id attribute and give it something like this
id="2,56"
2 = the question || post id
56 = the answer id
by this way you will have more control on your posts and comments
1. if reply_ is an individual class
$('.reply_')[$('.reply_').length - 1].after(comment);
2. if replyToComment_ is an individual class
$('.replyToComment_').before(comment);

I am not sure, I understood your question correctly, but I think .prepend() would help you.
You will need to wrap your last div i.e. <div class="replyToComment_'.id.'"> some button and stuff </div> with some other div and do .prepend() on that parent everytime. Like this:
<div class='parentContainer'>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And do $(".parentContainer'").prepend(newComment) to add comment everytime.

This is how I would do it:
$("#addtxt").click(function () {
$("[class^='replyToComment']").before("<div class='newReply'>" + $("#text").val() + "</div>");
});
Here is the JSFiddle demo

Making ahref from a div

I have a div as follows:
<div class="slide_items">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
What i want to do is, instead of having URL in each item in slide_items div. I want user to click on <div class="slide_items">. I want the slide_items to be clickable as the div itself, rather than putting a href in every inner div.
How can i do this?

The proper way would be to use a single link (but change the inner elements to span for validness)
<a href="/url" class="slide_items">
<span class="slide_item"><img src="image"/></span>
<span class="slide_title">title</span>
</a>
And make sure that they are treated as block elements from the css
a.slide_items, a.slide_items span{
display:block;
}
If you have to go the div way, then use
<div class="slide_items" data-href="/url">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
and add a script (since you use jquery)
$(function(){
$('.slide_items').click(function(){
var href = $(this).data('href');
window.location = href;
});
});

You can add onclick="window.open('google.com')" event to simulate a link to your div.
In the case where you want the entire div to appear to a be a link, you will want to change your cursor. Add style="cursor: hand; cursor: pointer;" to your div as well.

You can add an onclick property to the div:
<div class="slide_items" onclick="location.href='/url';" >
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>

you can use some simple javascript to get this done
use the onclick() event
so your HTML code looks something like
<div class="slide_items">
<div class="slide_item" onclick="function1()"><img src="image"/></div>
<div class="slide_title" onclick="function2()">title</div>
</div>
your javascript code will look like
function function1(){
// insert your code here
}
function function2()
{
// insert your code here
}
the code can be done in many ways depending on what you want , if you just want to redirect to another div , use the display attributes alternating between none and block , more reference here documentation .
if you want to redirect to another site you can use
window.open("your url")

<div class="slide_items">
<div class="slide_item"><img src="image" alt="my image" /></div>
<divclass="slide_title">title</div>
</div>
js:
$(function() {
$('.slide_items').click(function() {
window.location = 'http://www.google.com';
});
});
css:
.slide_items:hover {
cursor: pointer;
}
http://jsfiddle.net/68Smw/6/
The redirect isn't working in jsfiddle, but it should work for you.

if you want it to likley say: Click here to enter site:
<div>
Click here to enter my site!
</div>

this find parent of another div and toggle its child using jQuery

I've done some research and nothing seems to be working. Here is the HTML followed by the JavaScript I am putting together. What I am trying to do is set it up so that whenever dashboard_gear_options is clicked, it toggles the appropriate hidden options row. Each block of code exists multiple times at different locations on the page. I tried using this, find, parent, next and children to no avail.
HTML:
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block (etc..)
JS:
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).parent('.content_block_holder').find('.hidden_options_row').toggle();
});
});

Try using closest([selector]) ( http://api.jquery.com/closest/ ) instead of parent in your selector. It will traverse up the tree and find "content_block_holder". parent([selector]) will just check the immediate parent and return an empty set if it doesn't match the selector provided.
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).closest('.content_block_holder').find('.hidden_options_row').toggle();
});
});
JSFiddle based on your code: http://jsfiddle.net/gK7yM/

try this
$(this).closest('.content_block_holder').find('.dashboard_holder').find('.hidden_options_row').toggle();

Also this chain works:
$(this).parent().next('.dashboard_holder').children('.hidden_options_row').toggle();
or
$(this).parent().next('.dashboard_holder').find('.hidden_options_row').toggle();

Display multiple hidden divs using jquery?

I have a code something like this:
<div id="specialDiv">
<div id="div1">
<div id="div2">
</div>
</div>
<div>
The div1 and div2 are hidden and right now in order to display them i am doing something like this:
$('#div1').show();
$('#div2').show();
It works but is there an elegant way to do this other than
$('#speicalDiv div').show();
Thanks.

You can use a multiple selector:
$("#div1, #div2").show();

$('#specialDiv div').show(); will show all div inside #specialDiv.
However, you don't have to hide the divs inside at all - hiding the parent is sufficient.
If you just wanted to show divs directly inside #specialDiv (in your case: #div1), you could select those using #specialDiv > div.

If you wish to add a class to the hideable divs, you can reference the class in the show()/hide() statements.
Otherwise, your method looks as elegant as possible.

Put the divs into a class. i.e.
$('.toshow').show();
Then they can be anywhere on the page and could be other things than divs if required.

Similar to what you've already suggested, you could do something like:
$('#specialDiv div').show();
But a more flexible approach would be to add a new class name to the divs you want to show:
<div id="specialDiv">
<div id="div1" class"hidden">
<div id="div2" class="hidden">
</div>
</div>
<div>
Then show them like so:
$('#specialDiv .hidden').show();