*
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 The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript 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: 61086
    
  66

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: 61086
    
  66

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: 61086
    
  66

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: 61086
    
  66

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

Joined: Jan 10, 2002
Posts: 61086
    
  66

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: 61086
    
  66

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: 61086
    
  66

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: 61086
    
  66

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: 61086
    
  66

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: 61086
    
  66

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: 61086
    
  66

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: 61086
    
  66

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: 61086
    
  66

My pleasure.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: How to do iteration among elements in jquery