Develop Reference

Hide element which is not a certain class

I want to hide an element which is not a certain class via jQuerys not() :
Content 1
Content 2
<div class="post-item c_1"></div>
<div class="post-item c_2"></div>
and
var thisContent;
jQuery('.content-btn').click(function() {
thisContent = this.id;
jQuery('.post_item').not('.'+thisContent).fadeOut();
}
am I using .not() method wrong in this context, because it seems not to work!

Your selector needs to be
jQuery('.post-item')
And you need to close the ) at the end of your jQuery, like this:
var thisContent;
jQuery('.content-btn').click(function() {
thisContent = this.id;
jQuery('.post-item').not('.'+thisContent).fadeOut();
});
See http://codepen.io/anon/pen/EaNXjg for a working example.

Try using
$(element).hasClass(".clasname").fadeOut();

as #AND Finally noticed modify your selector .. and while you use click on Anchor you need to use e.preventDefault; try this
jQuery('.content-btn').click(function(e) {
e.preventDefault;
thisContent = this.id;
jQuery('.post-item').not('.'+thisContent).fadeOut();
$('.'+thisContent).fadeIn();
});
DEMO

How to decide which element is being clicked in jQuery?

I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.

this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});

Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});

this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;

The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});

You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});

.hover() with jQuery works only one time

My content box is disabled, I try to enable it with .hover(), but the problem is that .hover() works only on the first hover, not every time; content box class is .dboxcontent:
$('div.conbox').hover(function () {
var activeID = $(this).attr('id');
$('#' + activeID + ' .dboxcontent').show();
}, function () {
var activeID = $(this).attr('id');
$('#' + activeID + ' .dboxcontent').remove();
});
jsfiddle example

Use .hide() instead of .remove(),
otherwise you are removing the DOM element with class .dboxcontent inside that hovered element.
Like this:
$('div.conbox').hover(function () {
$(this).find('.dboxcontent').show();
}, function () {
$(this).find('.dboxcontent').hide();
});
Fiddle
Actually you don't need jQuery for this, just CSS is the best solution here.
.conbox:hover .dboxcontent {
display: block;
}
Just CSS here

You need .hide() method: http://jsfiddle.net/qVuhh/10/
If you use the remove()method, the tag is removed.

When you do a .remove() you are actually removing the HTML element from the DOM.
You should hide it instead.
I would rewrite your js this way:
$('div.conbox').hover(
function() {
$(this).find('.dboxcontent').show();
}, function() {
$(this).find('.dboxcontent').hide();
}
);
You don't need string concatenation there. You can use a .find() instead.
http://jsfiddle.net/qVuhh/9/

How to append some extra text in the div tag

I am trying to take the label text of the checkbox which are checked and I trying to append in the span tag,
When user click the the ok button in the popUp
Here it is not working. Here is my jsfiddle
My script is:
$('.modal-footer .preSuccess').click(function(){
var parentElement=$(this).parent().parent().attr('id');
$('#'+parentElement+ '.modal-body input[type="checkbox"]').each(function(){
var pre =$(this).next('label').text();
if($(this).is(':checked')){
$('.'+parentElement+'Pre').append('<span>'+pre+'</span>');
}
});
});

Try
$('.modal-footer .preSuccess').click(function () {
var modal = $(this).closest('.modal');
var parentElement = modal.attr('id'); // issue here, use closest to get a parent matching the selector
//again issue with the selector
modal.find('.modal-body input[type="checkbox"]').each(function () {
var pre = $(this).next('label').text();
if ($(this).is(':checked')) {
$('.' + parentElement + 'Pre').append('<span>' + pre + '</span>');
}
});
});
Demo: Fiddle

I took a look at your code and you're missing a space when querying the checkbox:
$('#'+parentElement+ ' .modal-body input[type="checkbox"]')
It wasn't able to find your checkbox and couldn't find the texts.
Other than that I would advice against the .parent().parent() structure, cause it's very prone to future bugs. Maybe just call the id directly, but I'm not sure how you're using this code.

Find All the controls in a form using jQuery or javascript

I am a starter in jQuery . How to find all the controls in a form using jQuery?
I know the code is like this
function submitValidator(){
$("form :input").each(function(){ });
I want to access their Id's and need to apply regular expressions
Some of the text boxes are numeric remaining will be alphanumeric. Is there any method to sort them to apply regular expressions?

You can add a new property data-charSet in HTML
<input type="text" id='amt' data-charSet='numeric'>
add which all controlles you want to add after the "form :"
function submitValidator(){
$("form :text, textarea").each(function(){
var NumericOnly = "^[0-9]*$";
var svId = $(this).attr('id');
if($(this).attr('data-charSet') == 'numericonly')
{
if(!$(this).val().match(NumericOnly)) {
alert("numeric");
eval("$('#" + svId +"').focus();")
return false;
}
}
});
}

It's jQuery, not j-query.
Anyway...
You can do it like this:
$("form :input").each(function (index, element) {
var id = $(this).attr("id"); // returns the object ID
var value = $(this).val(); // returns the object value
// etc
});

use
function submitValidator() {
$("form :input").each(function(){
var id = $(this).attr('id'); // here you got id
});
} // here missed brace

you need not to get Id if you can get object
function submitValidator() {
$("form :input ,form textarea").each(function(){
$(this).yourfunction();
});
}
:input will only give you tags with input, textarea will be missed so need to add that as well

I think you want to do something like this:
$("form").find("input").each(function(){
var currentElementsId = $(this).attr("id");
if(currentElementsId.match(/^regex/)){
//do something
}
});
if you want to get more than only input elements inside the form tag, you can put multiple selectors in the find() function like this; find("input,select,textarea,.className,[type='valueOfAttributeType']") and obviously any other selectors