Question

I’m developing a page using the jQuery sparklines plugin. This plugin replaces some CSV text with a canvas tag. I have a series of span tags which contains the CSV text. I’m trying to write a jQuery selector to select the span tags that have yet to be populated with a canvas tag:

<td>
    <span class="inlinesparkline">
        <canvas style=" ... " width="200" height="18"></canvas>
    </span>
<td>
<td>
    <span class="inlinesparkline">0,2,0,0,0,0,0,0,0,0,0,0,0</span>
<td>

I’ve written:

$('.inlinesparkline:not(:has(canvas))')

However, this does not work in IE. Since the canvas tags are generated by the plugin, I can’t (easily) add a class to them to use in the selector. Is there another way to select these “spans without canvas” tags that will work in IE?

Thanks!

Answer 1

Using $.filter, this should work:

var elements = $('.inlinesparkline').filter(function(index) {
    return !$(this).find('canvas').length;
});

It will filter out each each .inliensparkline where there are no <canvas> elements within the element. Note that this is just a different way of doing :not(:has()), but this one should work in IE.