JQuery syntax

[The_Alligator]

Can I keep multiple CLASS attributes in HTML elements and retrieve them using JQuery ?

Example:

<td class=class1><input type="checkbox" class="class2" class="class3" name="str1" value="" align="middle" /></td>

I wish to find out how many elements have class="class3".

Can I retrieve those elements using JQuery $("#class3").size() ? this seems does not work...this gives wrong result.

[jscheuer1]

$("#class3").size()

will return how many elements on the page have an id of class3.

You want:

$(".class3").size()

Also available in jQuery is the hasClass() function:

if($this).hasClass('class3')){
	// do something here
}

Which can be useful inside an each() function or inside an event (click(), hover(), etc.) function.

[The_Alligator]

Thanks for the post. That was helpful.

I need one more help here.

Could you please let me know whether there is a kind of function like doesnothasClass() in JQuery ?


Basically,I want to exclude some input types which has a particular class="CLASS1"

can JQuery help at this part.

As of now,I have a javascript like below

  
var inputs = document.getElementById("tableContainer").getElementsByTagName("input");
         //alert('inputs.length='+inputs.length);
         
         for (var index = 0; index < inputs.length; index++)
         {
            if (inputs[index].type == "checkbox")  // I WANT to exclude input checkboxes containing class="CLASS1"
            {
               checkboxes.push(inputs[index]);
            }
         }

I want to modify this javascript . I want to use JQuery here and want to do the above red colored comment.

what changes I have to do here if I use JQuery here ?

[jscheuer1]

It's hard to be certain without more of the code and without the markup. But in many scenarios (assuming, which isn't clear from your post, that checkboxes was an empty array before the code in your post), that would be roughly equivalent to:

var checkboxes = $('#tableContainer input:checkbox').not('.CLASS1');

Or (if checkboxes has already been declared in the scope where it is required and is available in this scope, and may be overwritten by this operation):

checkboxes = $('#tableContainer input:checkbox').not('.CLASS1');

Either way (whichever, if either, works), checkboxes could thereafter be treated in most respects as a normal array, and also as a jQuery collection of objects.

If neither works out for you, I would need to see the page and have more of an idea of what your ultimate objective is.

[The_Alligator]

Thank you so much . Thats perfectly working fine.

Could you please help me to use JQuery for the problem below ?


I have multiple <td>'s as below.

<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr1" value="" align="middle" /></td> //record-1

................................................................................
................................................................................


<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAsia column10 " name="strCustTerr19" value="" align="middle" /></td> //record-18


Let me explain what I need here

CASE 1:

When the user clicks on such a <td> say the //record-1 in the above, I want to show the below alert text .
alert text is "AgreeAmericasClustercolumn17" // "Agree" to add because 17 is odd

please see the color to understand how I have picked the data to build this alert string.

CASE 2:

When the user clicks on such a <td> say the //record-18 in the above, I want to show the below alert text .
alert text is "ViewAsiaClustercolumn10" // "View" to add because 10 is even

please see the color to understand how I have picked the data to build this alert string.



If I use javascript , then I have to put onclick() functions in each td's . Also , it wont be easy to get the multiple CSS values in a <td>.

So, I'm wondering whether JQuery can make it easier ?
Could you please help at this part.

[jscheuer1]

Here's a little demo. The selector in this case is $('td'). It could be $('.cellTextGreyLeft'), $('td.cellTextGreyLeft'), or even $('td.cellTextGreyLeft[width=33]'). There are other possibilities for the selector. Things would be a little bit simpler if you were going for just the onclick of the inputs. Those are included here though, because they are in the td's.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('td').click(function(){
		var cname = $(this).find('input').get(0).className.split(' '), cnum = cname[2].substr(6);
		alert((cnum % 2 === 0? 'View' : 'Agree') + cname[1].substr(12) + 'Cluster' + cname[2]);
	});
});
</script>
</head>
<body>
<table>
<tr>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr1" value="" align="middle" /></td>
</tr>
<tr>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAsia column10 " name="strCustTerr19" value="" align="middle" /></td>
</tr>
</table>

</body>
</html>

[The_Alligator]

Here's a little demo. The selector in this case is $('td'). It could be $('.cellTextGreyLeft'), $('td.cellTextGreyLeft'), or even $('td.cellTextGreyLeft[width=33]'). There are other possibilities for the selector. Things would be a little bit simpler if you were going for just the onclick of the inputs. Those are included here though, because they are in the td's.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('td').click(function(){
		var cname = $(this).find('input').get(0).className.split(' '), cnum = cname[2].substr(6);
		alert((cnum % 2 === 0? 'View' : 'Agree') + cname[1].substr(12) + 'Cluster' + cname[2]);
	});
});
</script>
</head>
<body>
<table>
<tr>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr1" value="" align="middle" /></td>
</tr>
<tr>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAsia column10 " name="strCustTerr19" value="" align="middle" /></td>
</tr>
</table>

</body>
</html>

The above code is giving compile error in IE browser.

syntax error at line no 9 i.e here jQuery(function($){ ...What is the problem here ?

The selector in this case is $('td'). It could be $('.cellTextGreyLeft'), $('td.cellTextGreyLeft'),

Yes. you are right. I would rather change it to $('td.selectColumn') for my need.


The code looks fine. Except the compile syntax error . Could you please remove the syntax error and help me to try this out ?

By the way , jQuery(function($) ----> what is $ inside for ? is it the reason for syntax error ?

[jscheuer1]

Works fine here in IE 6, 7, & 8. What version of IE are you using? Did you use the exact code that you quoted? Just to be sure I copied that (your quote) and it works here.

You don't have a:

$('td.selectColumn')

You could do a:

	$('td').has('.selectColumn').click(function(){

Or, if you want your onclick to only apply to the input:

	$('input.selectColumn').click(function(){

[The_Alligator]

Works fine here in IE 6, 7, & 8. What version of IE are you using? Did you use the exact code that you quoted? Just to be sure I copied that (your quote) and it works here.

You don't have a:
You could do a:

	$('td').has('.selectColumn').click(function(){

Or, if you want your onclick to only apply to the input:

	$('input.selectColumn').click(function(){

NOW its working. My IE version is 7.0.5730.13
In order to fix this , I downloaded the JQuery JS library in my hard disk and then used <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Bingo .....Now it started working

$('input.selectColumn').click(function(){

yup , I'd love this . because I am interested in clicking checkboxes of class 'selectColumn' only.

You are very much helpful....Will you be kind enough to help me at the last part below ? I'm loving JQuery to implement. This is an awesome library.

Let me explain the last part of the problem here..

IF there is ALL the blue checkboxes are checked on PAGE LOAD then I want to check the RED checkbox below .

This would be very hard to implement using simple javascript. I'd love to apply JQuery here. I'd customize this into my page.

N.B : Here is the logic . All those blue checkboxes have same class ="AgreeAmericasClustercolumn17 " and the red checkbox has class cloumn17 ....so they all belong to same column17...so they will be grouped on PAGE LOAD.

<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr0" value="" align="middle" /></td>




<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr1" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr2" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr3" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr4" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr5" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr6" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr7" value="" align="middle" /></td>

[The_Alligator]

Works fine here in IE 6, 7, & 8. What version of IE are you using? Did you use the exact code that you quoted? Just to be sure I copied that (your quote) and it works here.

You don't have a:
You could do a:

	$('td').has('.selectColumn').click(function(){

Or, if you want your onclick to only apply to the input:

	$('input.selectColumn').click(function(){

NOW its working. my IE version is 7.0.5730.13

In order to fix this , I downloaded the JQuery JS library in my hard disk and then used

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

bingo .....now it started working

$('input.selectColumn').click(function(){

yup , I'd love this . because I am interested in clicking checkboxes of class 'selectColumn' only.


You are very much helpful


Will you be kind enough to help me at this last part ? I'm loving JQuery to implement. This is an awesome library.

Let me explain the problem first...

IF there is ALL the blue checkboxes are checked on PAGE LOAD then I want to check the RED checkbox below .

This would be very hard to implement using simple javascript. I'd love to apply JQuery here. I'd use this into my page.

<td width="33" class=cellTextGreyLeft><input type="checkbox" class="selectColumn selectColumnAmericas column17 " name="strCustTerr0" value="" align="middle" /></td>




<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr1" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr2" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr3" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr4" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr5" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr6" value="" align="middle" /></td>
<td width="33" class=cellTextGreyLeft><input type="checkbox" class="AgreeAmericasClustercolumn17" name="strCustTerr7" value="" align="middle" /></td>