*
The moose likes HTML, CSS and JavaScript and the fly likes How to do iteration among elements in jquery Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to do iteration among elements in jquery" Watch "How to do iteration among elements in jquery" New topic
Author

How to do iteration among elements in jquery

james stan
Greenhorn

Joined: Oct 13, 2012
Posts: 25
Hi ,
My Page has a table containing 20 rows. The first column in each row has a checkbox . If the checkbox is checked , remaining columns in that row are visible .

Now i could write a Jquery snippet for 2 checkboxes .In the below code [fmCheck] is id of the Checkbox and [hidden] is the class of the element which will be "un-hidden" if checkbox is checked.


Now i need to implement the same functionality across 20 checkboxes . How can i iterate through 20 checkboxes in the page [like checkbox 19 should hide hidden 19 class]?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

Thanks for using code tags, but please also make sure that the indentation is proper. The wonky indentation in your post makes the code almost impossible to follow.

In general, jQuery applies a method to all elements that are gathered into the wrapped set by a jQuery selector. So you usually don't need to do any iteration on them if the operation to be applied is going to be the same for all of them.

If for some reason you need to treat each element individually, you can use the .each() method to invoke a callback on each element individually.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

Another tip: using if/else to show/hide is overly verbose. Check out the .toggle() method.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

Another tip: doing $('.hidden').hide(); in the ready handler is wasteful. Use CSS to initally hide the .hidden elements, not script.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

Another tip: use a change handler, not a click handler on the checkboxes.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

Another tip: applying the above tips should reduce your ready handler body to 1 line.
james stan
Greenhorn

Joined: Oct 13, 2012
Posts: 25
Hi ,
Thankyou for all your TIPS.javascript:emoticon(''); . But in my code there are 19 different classes and 19 checkboxes . So like each checkbox will hide a unique class. Something like this -

Checkbox 1 Class(hidden1)
Checkbox 2 Class2(hidden2)



Checkbox 19 Class19(hidden19)

Each Checkbox will only hide that particular row .

Can we do this with .each()?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

james stan wrote:So like each checkbox will hide a unique class.

Mistake.

Why does each have a unique class? If they're all going to do the same thing (albeit to different elements) they should be of the same class so that they can be treated as a group.

Make sense?
james stan
Greenhorn

Joined: Oct 13, 2012
Posts: 25
ok good sir ,my mistake for not making things clear.



Now if i click Checkbox for each row , the content for that row will be visible(Originally hidden on page load).
There are 20 checkboxes like this.
Each row has unique options based on subject . So if i use same class wont clicking a checkbox show all columns in all the rows instead of showing only columns in that particular row[which i want]?



Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

The handler code for the change event can easily limit itself to applying show/hide functionality to all columns in the same row without having to resort to unique class names for each row.

Hint: the .closest() method will search for an ancestor that matches a passed selector. How can it be used to locate the target row?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

P.S. The class name "hidden" is not a good choice because sometimes "hidden" elements are hidden, and sometimes they are displayed. So "hidden" is misleading for half the cases. I'd choose a class name such as "hide-able" or "toggle-able" to better reflect the semantics.
james stan
Greenhorn

Joined: Oct 13, 2012
Posts: 25
Thanks for you advice and patience .But i still dont get it as to how to apply the same snippet across all the checkboxes [ to make each row visible based one each check].
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

Post the HTML structure for one of the rows and I'll see what further hints I can offer.
james stan
Greenhorn

Joined: Oct 13, 2012
Posts: 25



here is the image of design view
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

Please post one of the rows in question. And please, please, get rid of the style attributes and move the CSS into a style element or stylesheet.

And, your images are not showing up, bit that's ok. They're not really germaine.
james stan
Greenhorn

Joined: Oct 13, 2012
Posts: 25
Here is the image link -http://imgur.com/mqIuv
For some reason , it doesnt show up when i embed it
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

james stan wrote:Here is the image link -http://imgur.com/mqIuv
For some reason , it doesnt show up when i embed it

Because that's the URL of a page, not an image,
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

OK, so I gotta step away from the computer for a bit, so I'm gonna jump ahead a tad.

Assuming that the checkboxes are in the first column, and it's all of the remaining cells in that row are to be hidden when the checkbox is unchecked (if it's to be the opposite, you should be able to figure out how to change that), here's the single-line ready handler to make that happen. I'll let you dissect it to see how it works:

(ignore the newline in the middle of the statement, the forum software is doing the wrapping)

Note: no class names at all are required. (Helping to keep the markup as clean as possible.) And no iterating is needed. All the checkboxes are handled by this code.
james stan
Greenhorn

Joined: Oct 13, 2012
Posts: 25
Ok,i got it sorted out . Thankyou for your help and patience in trying to solve it
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

My pleasure.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to do iteration among elements in jquery
 
Similar Threads
jQuery: how to determine if any checkbox is checked.
Need Help with binding click events to table rows
calling the struts action on jquery button click
Need help with Jquery
DataTable and Select All Checkboxes