Question

我有一个javascript树，用户选择一个树节点并单击一个按钮，然后在该选定的树节点旁边添加一个图标。

以下是该树中一个节点的源代码：

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

下面是我用来在树节点旁边添加图标的代码。

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

图标显示正确。

我的问题是：

我只需要显示一次特定图标。目前，当用户选择一个节点并单击该按钮两次时，该选定节点旁边会附加2个图标。

在添加节点名称之前，有没有办法检查<a style="cursor: default;"><ins class="pattern-icon3"> </ins></a>是否已经附加在节点名称旁边？

Answer 1

如果您想检查html是否存在：

if ($('#selector').length > 0){
     alert('tag exists');
}

Answer 2

您可以尝试将该元素与find()匹配，并仅在匹配失败时附加该元素：

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>');
}

Answer 3

您可以尝试选择.pattern-icon3元素并检查生成的对象的length属性。如果该元素不存在，length将为0。如果确实存在，则会大于0：

if($j("li[name='" + node_name + "'] > a .pattern-icon3").length) {
    //Already exists!
}

Answer 4

只是一个想法，但也许你可以使用.one？

$("li[node_id]").one("click", function () {
    // show the icon
});

检查是否存在元素或html标记

4 个答案: