Search code examples
javascriptjquerycssjqtree

Selector to get parent of <span> text to change its color

I'm using JQTree to created nested tree views of our test data. I want to highlight failures in red text. I'm using var failText = $("span:contains('FAIL')"); and failText.css({'color': 'red'}); to do that where the actual fail occurs. However, I want to also highlight the upper level parent so the technician doesn't have to search through all the tests to find the one that failed, they can just look for the red title text and then drill in there.

To get the parent text I've tried several things:

failText.parents('.jqtree-title-folder').css({'color': 'red'});

failText.closest('.jqtree-title-folder').css({ 'color': 'red'});

Neither works. I've also tried to get the parent <span> & closest <span>, neither of which work.

Fiddle: http://jsfiddle.net/delliottg/L6hdzene/

How can I get the upper level text (in the fiddle the second test labeled: "Electrical Test Data Version: SBE05", and it's nested "Test Step Name SET 2000 RPM" and turn their text red? I want to turn both of these bits of text red as well as the actual Result text (which is already red).

Solution

  • This does the trick and shows you the path to FAILs via red.

    failText.parents('.jqtree-folder').find('> .jqtree-element > .jqtree-title-folder').css({
    'color': 'red'
});

    Updated jsfiddle.

    There may be a more performant selector to accomplish, but this works.