Intersect two jQuery selections

Question

jQuery has the ability to union the results of two selections, using .add():

var foosAndBars = $(".foo").add(".bar"); //select all elements classes .foo or .bar

But i need to perform an intersection of two sets:

var allTRs = $("#lvTransactions").find("[data-language]").closest("tr")
var trMatchingLanguage= allTRs.find("[data-language]").filter("[data-language='pascal'],[data-language='C#'],[data-langauge='Ook']").closest("tr");
var trMatchingTag = allTRs.find("data-tag").filter("[data-tag='wpf'").closest("tr");

I need the TR elements common in both sets, as those are the ones to be shown:

allTRs.hide();    
trMatchingLanguage.intersect(trMatchingTag ).show();

Edit: jsFiddle:

Show all rows that have:

data-language: pascal or C#
data-tag: wpf

with the following sample table:

<div id="lvTransactions">
    <table>
        <thead>
            <tr><th>Question</th><th>Lanaguage</th><th>Tag</th></tr>
        </thead>
        <tr>
            <td>How to</td>
            <td data-language="C">C</td>
            <td data-tag="wpf">Windows Presentation Foundation</td>
        </tr>
        <tr>
            <td>Why does</td>
            <td data-language="pascal">Pascal</td>
            <td data-tag="dwm">Windows Presentation Foundation</td>
        </tr>
        <tr>
            <td>Why can't</td>
            <td data-language="pascal">Pascal</td>
            <td data-tag="wpf">Desktop Window Manager</td>
        </tr>
        <tr>
            <td>Does it</td>
            <td data-language="C#">C#</td>
            <td data-tag="wpf">Desktop Window Manager</td>
        </tr>
        <tr>
            <td>Where is</td>
            <td data-language="Java">Java</td>
            <td data-tag="wpf">Windows Presentation Foundation</td>
        </tr>            
    </table>
</div>

And right now i have the (faulty) code (that shows the union, rather than the intersection):

//Only show rows that are both C#/Pascal and WPF

var allTRs = $("#lvTransactions").find("[data-language]").closest("tr")

var theLanguageTRs = allTRs.find("[data-language]").filter("[data-language='pascal'],[data-language='C#'],[data-langauge='ook']").closest("tr");
var theTagTRs = allTRs.find("[data-tag]").filter("[data-tag='wpf']").closest("tr");

[`_.intersection`](http://underscorejs.org/#intersection) is your friend ^^ — moonwave99, Jul 15 '14 at 14:30
mwell, you can multiple criteria in your selector like `$(".foo.bar")`. Elements that have both classes foo and bar — TCHdvlp, Jul 15 '14 at 14:31

score 4 · Accepted Answer · edited Dec 03 '15 at 03:30

4

What about something as simple as:

$(array1).filter(array2);

Reference: $.filter()

edited Dec 03 '15 at 03:30

Pang

9,564
146
81
122

answered Jul 15 '14 at 14:31

FreeAsInBeer

12,937
5
50
82

That works! It took me about [two hours to get some jsFiddle that compiles](http://jsfiddle.net/eXdM7/15/). Then i could validate your theory. – Ian Boyd Jul 15 '14 at 15:50

Intersect two jQuery selections

1 Answers1