• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Filter <li> using checkboxes and jquery

 
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What would be the best way to filter the <li>'s based on the user click the check boxes....If the check box is not contained in an <li> then I would like that <li> to hide....Initially all <li>'s will show....if the user unchecked the list box then the <li>'s will begin to show again as long as they meet the requirements if other check boxes are shown....Thank you for the help

[Edit: removed code example with very long lines of whitespace; reposted later in topic]
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Welcome to the Ranch!

What relationship do the checkboxes have with the list element? They're not related structurally. Is it through the class names?

By the way, you're code is really hard to read. What's up with all the excess and extra white-space? It'll be easier for folks to help you if you make sure that your code is well-formatted before posting (and be sure to UseCodeTags).
 
Sam Burns
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Welcome to the Ranch!

What relationship do the checkboxes have with the list element? They're not related structurally. Is it through the class names?

Yes each category is entered into a span and has that class name in addition to the html shown

By the way, you're code is really hard to read. What's up with all the excess and extra white-space? It'll be easier for folks to help you if you make sure that your code is well-formatted before posting (and be sure to UseCodeTags).



Sorry I will fix it up that does not look good

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That would help a lot.

But even now I can see some problems in your markup.

Class names cannot contain spaces. So your class names of "dry beans" and "brussels sprouts" are in trouble. Class name are delimited by spaces so "dry beans" assigns the class dry, and the class beans, not a class named "dry beans".

I also see commas in there. Commas are not used to delimit class names.
 
Bartender
Posts: 11497
19
Android Google Web Toolkit Mac Eclipse IDE Ubuntu Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
@Sam
You had posted in the "Ranch Office" forum which

This forum is intended for questions and comments about the web sites www.javaranch.com and www.coderanch.com.
It is not for questions about the Java language - that's what all our other forums are for.


I will move your post to a more appropriate forum
 
Sam Burns
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thank you ...just joined
 
Sam Burns
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Sam Burns wrote:What would be the best way to filter the <li>'s based on the user click the check boxes....If the check box is not contained in an <li> then I would like that <li> to hide....Initially all <li>'s will show....if the user unchecked the list box then the <li>'s will begin to show again as long as they meet the requirements if other check boxes are shown....Thank you for the help




 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
OK, I"m still not sure what's supposed to happen. When a checkbox is clicked please be explicit about what it is that you want to make happen.
 
Sam Burns
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
When a check box is checked such as artichoke then any <li> that has artichoke as a category will display, in this example <li>My third Listing</li> would only be shown while <li>My Second listing</li> would hide

If the artichoke box was unchecked then <li>My Second listing</li> would show again since it meets the filter criteria...

If multiple check boxes are checked then the <li> must contain all of those categories, otherwise the <li> will hide

I hope this is a better description
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Sam Burns wrote:... then any <li> that has artichoke as a category will display...


What determines whether a list element has a value as a "category". That's not a native concept that you've employed here, so you should define exactly what it means. I'm inferring that it means any <li> that contains a <span> element that has the value as a class name?

If that's the case, start from basics: what jQuery selector, or combination of selectors and methods, will select an <li> that has a child <span> with a given class name?

Give that a try and see what you come up with.

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hint: one possible solution would employ the $.map(), and .closest() methods.
 
Sam Burns
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


Here is what I have so far but this makes the <span> elements show and hide instead of the parent element. I am not sure how to tell jquery to look at all the <li>'s and search for the child <span>'s with the given class name that matches a checked check box and show these <li>'s and hide the <li> elements if the <span> elements do not match the selected check box items
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Sam Burns wrote:I am not sure how to tell jquery to look at all the <li>'s and search for the child <span>'s with the given class name that matches a checked check box and show these <li>'s and hide the <li> elements if the <span> elements do not match the selected check box items



You can search up the parent tree of any element looking for elements that match any selector using .closest().
 
Sam Burns
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
When adding closest it either shows or hides everything....still stuck on this but think I am close

 
reply
    Bookmark Topic Watch Topic
  • New Topic