Question

我一直难以选择IE Web Control TreeView的节点。我在IE8兼容模式（IE7标准模式）上运行代码。

我正在尝试选择这样的树节点：

$("tvns\\:treenode").css("color", "red");

我尝试在$（document）.ready（）函数内部以及在填充TreeView后按下按钮时调用的函数内部使用此选择器。这两个\ backspaces是为了逃避冒号字符。

TreeView HTML如下所示：

<ciswc:TreeView ID="tvWorkArea1" onfocus="fn(this);" 
ondragstart="javascript:captureNode1();" class="ui-widget ui-widget-content" 
onclick="fnStoreEID(0)" 
runat="server"SystemImagesPath="Common/webctrl_client/1_0/treeimages/" 
onunhover="unHoverFunction('WorkArea')" EnableViewState="False" 
onhover="selectNode('Smart');" Height="100%" width="100%">
</ciswc:TreeView>

我应该注意，由于某种原因，TreeView HTML显示为tvns：运行应用程序的IE Developer Tools中的TreeView。但它不应该影响树中节点的选择。

每个节点看起来像这样：

<tvns:treenode Expanded="True" Selected="true" NavigateUrl="#" NodeData="0">
New Entity:
</tvns:treenode>

当页面最初加载时，TreeView存在，但尚未存在树节点。在用户执行了一些操作之后，TreeView将由树节点填充。

我有一个按钮，它调用一个包含JQuery选择器的函数 - 我已经通过javascript调试了，我可以看到代码函数被调用，但它似乎没有找到节点。

有什么想法吗？

我尝试使用纯javascript选择树节点，但没有返回任何内容：

var nodes = document.getElementsByTagName("tvns:treenode");

for (i = 0; i < nodes.length; i++) {
    nodes[i].style.colour = "red";
}

我注意到HTML有runat =“server”属性。这可能是我无法选择TreeView节点的原因吗？

Answer 1

您的选择器在IE 中是，但.css()由于某种原因不适用于该对象。
但是.attr()工作正常：

alert($("tvns\\:treeview").html()); $("tvns\\:treeview").attr("style", "color: red;");

我的DEMO。

<强> UPD。更好的纯js解决方案：

var els = document.getElementsByTagName("tvns:treeview");
for (i = 0; i < els.length; i++)
{
    els[i].style.color = "red";
}

DEMO

Answer 2

似乎我没有正确理解ASP.NET Web服务器如何控制工作。

我无法选择元素的原因是因为它们不存在于DOM 中，而且它们永远不会存在。原因是我使用的IE Web Control（它似乎是一个ASP.NET 1.0组件）在客户端动态生成树视图（它是用纯Javascript实现的）。

树节点中的数据确实存在于DOM中，但它实际上以逗号分隔格式包含在输入 HTML标记的值属性中。我猜这是从服务器返回的内容，然后由客户端IE Web控件根据此呈现TreeView。我从源代码中看到的内容中假设了很多这些知识，因为我在网上找不到任何其他文档用于此Web控件，可能是因为它太旧了。

我目前正在研究用ASP.NET 2.0 System.Web.UI.WebControls.Treeview替换IE Web Control的可行性。我对此进行了一些实验，似乎这次是在服务器端生成HTML，而不是在客户端生成，因此生成的HTML 在页面的HTML DOM中可用，因此我可以选择树节点并用它们做我想做的事！

Answer 3

我认为问题在于选择器内的斜杠。您可以尝试向树节点添加虚拟属性，例如每个节点上的“data-treenode”。示例（我没有ie8，使用ie7用户代理在ie11上测试）：

<tvns:treenode Expanded="True" data-treenode="true" Selected="true" NavigateUrl="#"  NodeData="0">
        New Entity:
</tvns:treenode>

$("[data-treenode]").css("color", "red");

// another solution
$("[NavigateUrl][NodeData]").css("color", "red");

http://jsfiddle.net/FdgR4/

JQuery选择TreeNode元素不起作用

3 个答案: