Question

I’m sure the answer exists on SO somewhere, but I’m at a loss for what terminology to search for. So apologies if this is a duplicate.

Is there an easy way in jQuery/JS of selecting the elements that “intersect” from the following HTML?

<div id="first">
  <div id="source-AAA"/>
  <div id="source-CCC"/>
  <div id="source-EEE"/>
  <div id="source-FFF"/>
</div>
<div id="second">
  <div id="BBB"/>
  <div id="CCC"/>
  <div id="DDD"/>
  <div id="FFF"/>
</div>

i.e. getting hold of the elements #CCC and #FFF from div#second, based on the fact that these two IDs are in #first?

I guess the proper answer is to do the intersect on the server-side (which is possible, but painful, as the two data sets come from different components), but I thought I’d check in case anyone knows of a neat way to do it in jQuery?

Answer 1

You’ll first have to collect all those IDs, and then build up a CSS selector string accordingly:

var divsToSelect = [];

$('#first div').each(function(){
    divsToSelect.push( $(this).attr('id').substr(-3) );
});

$('#' + divsToSelect.join(',#'));

http://jsfiddle.net/TXqw3/