Develop Reference

Dropdown menu choice hides fields through class

I have a dropdown menu, that when a value is chosen it hides/ shows fields, because of the php code behind it I need to use class to choose it.
I was also wondering if theres a way to add back the padding when hiding and showing the fields.
I tried using "document.getElementsByClassName("className");" But couldn't get it working.
HTML:
<select id="form" onchange="ChangeDropdowns(this.value);">
<option value="hide">hide</option>
<option value="show">show</option>
</select>
<input type="text" id="testField" class="testField" />
Javascript:
function ChangeDropdowns(value) {
if (value == "show") {
document.getElementById('testField').style.display = 'none';
} else if (value == "hide") {
document.getElementById('testField').style.display = 'block';
}
}

You are using the querySelectorAll function wrong, it returns an array of elements, if you want a single element use querySelector which in this case it looks like thats what you want.
HTML
<input type="text" id="testField" class="testField2"/>
JS
//Uses class, a period needs to be before the class name, when selecting by class
document.querySelector(".testField2").style.display='none';
//Uses id, a # needs to be before the id name, when selecting by id
document.querySelector("#testField").style.display='none';
When using querySelectorAll it will return an array, so you have to access it as such
var elements = document.querySelectorAll(".testField");
elements[0].style.display='none';
Your fiddle had a couple errors:
Function name in onchange didnt match the actual function name
you had onLoad selected for the wrap, which was making it so the function wasnt being declared in the global scope.
You werent using the proper css selector, classes have . prefixed to the name, ids have # prefixed, when no period or # before the name, the name is looked up as an element tagname

How to get elements of similar name? jQuery

<input name="Indian_Karnataka_Bangalore" value="Bangalore" />
<input name="Indian_Andhra_Hyderabad" value="Hyderabad" />
<input name="Indian_Kerala_Trivandrum" value="Trivandrum" />
<input name="Indian_Maharashtra_Mumbai" value="Mumbai" />
At a given time, only one input element will be present in the DOM. How will I know the name of the specific input element name? I don't want to depend on values as it might change.
Using jQuery.
The INDIAN term will be static in every input element.
Actually i am trying to validate the input elements. DOM will have all the elements but at a given time only one element will be active and that element should have some value in it.

var $inputs = $('input[name*="Indian"]'),
inputsName = $inputs.attr('name');
You can use the same selectors as you would CSS.
Chris Coyier wrote a piece on attribute selectors here

var indianInputs = $("input[name^='Indian']");
//Matches all input elements whose name attrributes 'begin' with 'Indian'
This differs than the one posted by #ahren in that his selector will match all input elements whose name attribute contain the string 'Indian'.
indianInputs.attr("name");
Would return the first matched element's name attribute's value, which, for your markup will be Indian_Karnataka_Bangalore
To find the names of all indianInputs, you must iterate over all matched elements
var indianInputNames = [];
indianInputs.each(function() {
indianInputNames.push($(this).attr("name"));
});

$('input[name="element_name"]')
You have a lot of ways to select by the name of the attribute check http://api.jquery.com/category/selectors/attribute-selectors/

Try
var name = $('input[name^="Indian_"]').attr('name')

Have you tried the filter function? Something like this:
$('input:visible')
.filter(function() {
return $(this).attr("name").match(/^Indian/);
});
This will return an array of input elements whose name starts with "Indian".
There is a good example here: https://stackoverflow.com/a/193787/1237117.

event if only one div has class

i have lots of divlayers with the class named ".current". depending on what the user does some of remove the class and some will get it again. this works fine, but what i want to is fire an event if only one div layer has the class ".current". how can i detect if only one element has the class current?
for example
if ($('#div4').hasClass('.current')) {
alert("fire me something");
}
something like "is the only one" hasClass.

in your event callback, simply check the number of divs that have the current class:
if ($('#div4').hasClass('current') && $('div.current').length === 1) {
...do stuff...
}
If you're only ever using current on divs, then you could just use $('.current').length === 1.

you should be able to use the css class as the selector and then get the length:
if($(".current").length == 1 ) {
alert('fire me something');
}

I "think" you could do:
if($('.current').length == 1) { //DO }
I believe the selector will return an array of the elements.

You have error syntaxe! you should add an ")" for your condition. and dont use the calss selecotr (".") . that's will work:
if($('#div4').hasClass('current')){
alert("fire me something");
}

You could see how many instances of the class .current that there are by using length. e.g.
var mycount = $(".current").length;
alert(mycount);
Then do whatever you like with the result.

See http://api.jquery.com/size/ or http://api.jquery.com/length/
$(".current").length
$(".current").size() *deprecated as of v1.8
Either will give you the count. Anytime you adjust the class check to see the count and fire the action if its 1

Search through document and find all inputs with titles

I want to search through my document, and find all inputs with title attribute, but at the same the title attribute can not be empty. So it should look for every input with title attribute that has at least one character in length.
Then I would like to make some event on those inputs (like add them some CSS class).
Is that even possible with jQuery or other javascript library?

I believe this would give you what you want:
$('input[title][title!=""]')
To apply css
$('input[title][title!=""]').addClass('class1 class2 class3');
http://jsfiddle.net/5hkAG/

$("input[title]").not('[title=""]')

var myInputs = [];
$("input").each(function() {
if($(this).attr("title").length > 0) {
myInputs.push(this);
// do other events as usual, using $(this) as selector for current input
}
});
// do something with myInputs, which is an array of all inputs with a title attribute

Get class name using jQuery

I want to get the class name using jQuery
And if it has an id
<div class="myclass"></div>

After getting the element as jQuery object via other means than its class, then
var className = $('#sidebar div:eq(14)').attr('class');
should do the trick. For the ID use .attr('id').
If you are inside an event handler or other jQuery method, where the element is the pure DOM node without wrapper, you can use:
this.className // for classes, and
this.id // for IDs
Both are standard DOM methods and well supported in all browsers.

It is better to use .hasClass() when you want to check if an element has a particular class. This is because when an element has multiple class it is not trivial to check.
Example:
<div id='test' class='main divhover'></div>
Where:
$('#test').attr('class'); // returns `main divhover`.
With .hasClass() we can test if the div has the class divhover.
$('#test').hasClass('divhover'); // returns true
$('#test').hasClass('main'); // returns true

Be Careful , Perhaps , you have a class and a subclass .
<div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>
If you use previous solutions , you will have :
myclass mysubclass
So if you want to have the class selector, do the following :
var className = '.'+$('#id').attr('class').split(' ').join('.')
and you will have
.myclass.mysubclass
Now if you want to select all elements that have the same class such as div above :
var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))
that means
var brothers=$('.myclass.mysubclass')
Update 2018
OR can be implemented with vanilla javascript in 2 lines:
const { classList } = document.querySelector('#id');
document.querySelectorAll(`.${Array.from(classList).join('.')}`);

This is to get the second class into multiple classes using into a element
var class_name = $('#videobuttonChange').attr('class').split(' ')[1];

you can simply use,
var className = $('#id').attr('class');

If your <div> has an id:
​<div id="test" class="my-custom-class"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
...you can try:
var yourClass = $("#test").prop("class");
If your <div> has only a class, you can try:
var yourClass = $(".my-custom-class").prop("class");

If you're going to use the split function to extract the class names, then you're going to have to compensate for potential formatting variations that could produce unexpected results. For example:
" myclass1 myclass2 ".split(' ').join(".")
produces
".myclass1..myclass2."
I think you're better off using a regular expression to match on set of allowable characters for class names. For example:
" myclass1 myclass2 ".match(/[\d\w-_]+/g);
produces
["myclass1", "myclass2"]
The regular expression is probably not complete, but hopefully you understand my point. This approach mitigates the possibility of poor formatting.

To complete Whitestock answer (which is the best I found) I did :
className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');
So for " myclass1 myclass2 " the result will be '.myclass1 .myclass2'

<div id="elem" class="className"></div>
With Javascript
document.getElementById('elem').className;
With jQuery
$('#elem').attr('class');
OR
$('#elem').get(0).className;

You can get class Name by two ways :
var className = $('.myclass').attr('class');
OR
var className = $('.myclass').prop('class');

If you do not know the class name BUT you know the ID you can try this:
<div id="currentST" class="myclass"></div>
Then Call it using :
alert($('#currentST').attr('class'));

If you want to get classes of div and then want to check if any class exists then simple use.
if ( $('#div-id' ).hasClass( 'classname' ) ) {
// do something...
}
e.g;
if ( $('body').hasClass( 'home' ) ) {
$('#menu-item-4').addClass('active');
}

Try it
HTML
<div class="class_area-1">
area 1
</div>
<div class="class_area-2">
area 2
</div>
<div class="class_area-3">
area 3
</div>
jQuery
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="application/javascript">
$('div').click(function(){
alert($(this).attr('class'));
});
</script>

If we have a code:
<div id="myDiv" class="myClass myClass2"></div>
to take class name by using jQuery we could define and use a simple plugin method:
$.fn.class = function(){
return Array.prototype.slice.call( $(this)[0].classList );
}
or
$.fn.class = function(){
return $(this).prop('class');
}
The use of the method will be:
$('#myDiv').class();
We have to notice that it will return a list of classes unlike of native method element.className which returns only first class of the attached classes. Because often the element has more than one class attached to it, I recommend you not to use this native method but element.classlist or the method described above.
The first variant of it will return a list of classes as an array, the second as a string - class names separated by spaces:
// [myClass, myClass2]
// "myClass myClass2"
Another important notice is that both methods as well as jQuery method
$('div').prop('class');
return only class list of the first element caught by the jQuery object if we use a more common selector which points many other elements. In such a case we have to mark the element, we want to get his classes, by using some index, e.g.
$('div:eq(2)').prop('class');
It depends also what you need to do with these classes. If you want just to check for a class into the class list of the element with this id you should just use method "hasClass":
if($('#myDiv').hasClass('myClass')){
// do something
}
as mentioned in the comments above. But if you could need to take all classes as a selector, then use this code:
$.fn.classes = function(){
var o = $(this);
return o.prop('class')? [''].concat( o.prop('class').split(' ') ).join('.') : '';
}
var mySelector = $('#myDiv').classes();
The result will be:
// .myClass.myClass2
and you could get it to create dynamically a specific rewriting css rule for example.
Regards

This works too.
const $el = $(".myclass");
const className = $el[0].className;

if we have single or we want first div element we can use
$('div')[0].className otherwise we need an id of that element

Best way to get class name in javascript or jquery
attr() attribute function is used to get and set attribute.
Get Class
jQuery('your selector').attr('class'); // Return class
Check class exist or not
The hasClass() method checks if any of the selected elements have a specified class name.
if(jQuery('selector').hasClass('abc-class')){
// Yes Exist
}else{
// NOt exists
}
Set Class
jQuery('your selector').attr('class','myclass'); // It will add class to your selector
Get Class on Click of button using jQuery
jQuery(document).on('click','button',function(){
var myclass = jQuery('#selector').attr('class');
});
Add class if selector have no any class using jQuery
if ( $('#div-id' ).hasClass( 'classname' ) ) {
// Add your code
}
Get the second class into multiple classes using into a element
Change array position in place of [1] to get particular class.
var mysecondclass = $('#mydiv').attr('class').split(' ')[1];

Direct way
myid.className
console.log( myid.className )
<div id="myid" class="myclass"></div>

use like this:-
$(".myclass").css("color","red");
if you've used this class more than once then use each operator
$(".myclass").each(function (index, value) {
//do you code
}