Question

I have a javascript tree, where user selects a tree node and clicks on a button which then appends an icon next to that selected tree node.

Here is the source code of one node in that tree:

<li node_id="4" name="mars" >
<ins class="jstree-icon"> </ins>
<a href="#" class="jstree-clicked"><ins class="jstree-icon"> </ins> Mars Planet 
    <a style="cursor: default;"><ins class="pattern-icon3"> </ins></a> <!--this line displays the icon-->
    <a style="cursor: default;"><ins class="pattern-icon3"> </ins></a> <!--this line displays the same icon again-->
</a>
</li>
.
.
.

Below is the code i use to append the icon next to the tree node.

$j("li[name='"+node_name+"'] > a").append('<a style="cursor:default;"><ins class="' + icon_class + '">&nbsp;</ins></a>');

The icon is displayed correctly.

My problem is:

I need to display a particular icon once only.
Currently, when user selects a node and clicks on the button twice, 2 icons are appended next to that selected node.

Is there a way of checking whether <a style="cursor: default;"><ins class="pattern-icon3"> </ins></a> is already appended next to the node name before it is added?

Answer 1

You can try matching the element with find() and appending it only if the match failed:

var listItemLink = $j("li[name='" + node_name + "'] > a");
if (!listItemLink.find("." + icon_class).length) {
    listItemLink.append('<a style="cursor:default;"><ins class="'
        + icon_class + '">&nbsp;</ins></a>');
}