Selector to get parent of text to change its color

Question

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).

both of those methods would only have worked if failtext was a child of a `.jqtree-title-folder` element. None of those elements had any spans as children even (all they contain is text). See [here](http://jsfiddle.net/L6hdzene/3/) I printed out the `.html()` for each `.jqtree-title-folder`. — Smern, Oct 24 '14 at 18:41

score 3 · Accepted Answer · answered Oct 24 '14 at 18:39

3

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.

answered Oct 24 '14 at 18:39

typeoneerror

55,990
32
132
223

Thanks, I'll take a look after lunch. – delliottg Oct 24 '14 at 18:41

score 0 · Answer 2 · answered Oct 31 '14 at 10:34

For CSS changes I do this:

data(php for example):

if( true ) {
    $node["css"] = "{\"color\":\"red\",\"font-weight\":\"700\"}";
}
else{
    $node["css"] = "{\"color\":\"green\",\"font-weight\":\"400\"}";
}

in js:

    $('#righttree_container').tree({
        data: data,
        onCreateLi: function(node, $li) {

            if (node.css) {
                var $title = $li.find('.jqtree-title');
                $title.css(jQuery.parseJSON(node.css));
            }
        },

Selector to get parent of text to change its color

2 Answers2