jQuery won't find custom tags

html, javascript, jquery

Solution

Your problem lies with the your initial variables:

var raw = $('pre').html();
var html = $(raw);

This translates to `var html = $($('pre').html())`, which will not match any element. The reason being that, since the selector is not preceded by an `#` or `.`, it is looking literally looking for the tag:

<start feat="11" class="ng-scope">
</start>
<annotation index="11" class="ng-isolate-scope ng-scope" style="background-color: rgb(238, 204, 153); background-position: initial initial; background-repeat: initial initial;">
</annotaion>

etc...

Here is a demo of what I mean: http://jsfiddle.net/hpNN3/7/

Simply do the following:

var html = $('pre');

DEMO: http://jsfiddle.net/hpNN3/6/

Problem

I have HTML with several custom tags. I want to find all but two ('start', 'end') and unwrap them. jQuery.find() seems to only find these custom tags when I search what's in the document, not when I search a jQuery object. What am I doing wrong? Should be self-explanatory in the fiddle: http://jsfiddle.net/hpNN3/2/ Here's the javascript part: ``` var raw = $('pre').html(); var html = $(raw); var starts = html.find('start'); var spans = html.find('span'); //this returns nothing console.log(starts) // works - can find in object console.log(spans) //this works console.log($('start')); //only picks up spans, not annotations // I want this to return the innerHTML of the pre, stripping all tags except for 'start' and 'end' -- but retain the contents of those tags. var cleaned = html.find(':not(start, end)').each(function() { $(this).contents().unwrap(); }); console.log(cleaned); $('#clean').html(cleaned) ``` and an example of the HTML: ``` <span class="ng-scope">CTAGCTCTCTGGAGATTAACGAGGAGAAATACTAGAtTGGTTCAT</span> <start feat="1" class="ng-scope"></start> <annotation index="1" class="ng-isolate-scope ng-scope" style="background-color: rgb(238, 153, 238); background-position: initial initial; background-repeat: initial initial;"> <span tooltip="Another Promoter" tooltip-placement="mouse" tooltip-append-to-body="true" ng-transclude="" class="ng-scope"> <span class="ng-scope">GATCATAAgcttgaat</span> </span> </annotation> <end feat="1" class="ng-scope"></end> <span class="ng-scope">tagccaaacttatt</span> ``` which should be: `CTAGCTCTCTGGAGATTAACGAGGAGAAATACTAGAtTGGTTCAT<start feat="1" class="ng-scope"></start>GATCATAAgcttgaat<end feat="1" class="ng-scope"></end>tagccaaacttatt` Thanks

Original source