Question

stackoverflow newbie here, so I’m hoping you can give me a warm welcoe by helping me with a problem. I’ve found several questions and answers similar to this, but none that are exactly what I need.
I’m pulling in some XML via AJAX (jquery) that I would like to be able to filter using checkboxes, etc. similar to sites like this:
http://www.worldmarket.com/giftfinder/index.jsp

The XML isn’t formatted in the best way (which I have no control over), and looks similar to this for each element I pull in:

  <element text="something.exe" value="dev|something.exe" depth="0" lastUpdate="2010-03-09 09:50" nextUpdate="" category="Entertainment" filesize="2 MB">
    <attribute key="Description" value="here is the description"></attribute>
    <attribute key="Language" value="English,Russian,Ukrainian"></attribute>
    <attribute key="Function" value="History, Education"></attribute>
    <attribute key="Industry" value="Public Sector,Sports"></attribute>
    <attribute key="Title" value="Something"></attribute>
    <attribute key="Tags" value="Politics"></attribute>
  </element>

So I have no problem simply looping through and displaying all of the elements in a grid using code like this:

$(this).find("element").each(function(index){
var appTitle = $(this).find("attribute[key='Title']").attr("value") || $(this).attr("text");

But the problem I’m having is in filtering the tags. I want to have several checkboxes on the left which are associated with different tags (or the industry or function attributes) in the XML and when clicked have the result set filter to show only elements with those tags.
What is the best way to do this? It’s as if I want to add something to the .find() that says fine elements WHERE tags=… (I know that’s drifting into SQL land, but…)
Anyway, any help or direction will be GREATLY appreciated.
Thanks in advance!

Thanks again for you help.
I’ve tried using .has and so far can’t really get it to work. Even just testing it in general with the dummy data I listed above, it doesn’t work:

var testThisData = '<element text="something.exe" value="dev|something.exe" depth="0" lastUpdate="2010-03-09 09:50" nextUpdate="" category="Entertainment" filesize="2 MB"><attribute key="Description" value="here is the description"></attribute><attribute key="Language" value="English,Russian,Ukrainian"></attribute><attribute key="Function" value="History, Education"></attribute><attribute key="Industry" value="Public Sector,Sports"></attribute><attribute key="Title" value="Something"></attribute><attribute key="Tags" value="Politics"></attribute></element>';
console.log($(testThisData).has("attribute[key='Language'][value~='English']").length);`

returns 0 as does even this:

console.log($(testThisData).has("attribute").length);

Sorry, I think I’m just not getting something.
Thanks.

Answer 1

If you are looking to get all the elements with a “Language” of “English” for instance you should be able to use:

$("element").has("attribute[key='Language'][value~='English']");

You can chain the filters to get what you need. The above returns all element nodes that have key=”Language” and value containing English.
If you need to get the English Language and Politics tag you can add another filter:

$("element").has("attribute[key='Language'][value~='English']").has("attribute[key='Tags'][value~='Politics']")