jQuery从TreeView中的所有元素中删除CSS类不起作用

Question

我有一个 ASP.NET TreeView 控件，并且在某些时候向span 元素添加了一个 CSS 类，以提醒客户端代码禁用树中的复选框。完成并开始工作。

问题是CSS 类充当禁用复选框的标志，需要删除。执行此操作的 jQuery 看起来很简单。

我已阅读以下内容，这似乎是一个显而易见的解决方案： jQuery Remove CSS Class from all Descendants at once

这是渲染的源代码（其中一部分 - TreeView 很大，只要知道这些 <span> 元素是 TreeView 的后代：

<div id="MainContent_MyTreeView">
   .....
      <span class="disabledTreeviewNode">

所以我有以下jQuery 在需要删除此类时被击中客户端：

  function EnableAllCheckBoxes(treeviewClientID) {
     $(treeviewClientID).removeClass('disabledTreeviewNode');
  }

我也尝试过以下变体：

$(treeviewClientID + ' span').removeClass('disabledTreeviewNode');

和：

$(treeviewClientID + ' span').removeClass();

和：

$(treeviewClientID).removeClass();

不幸的是，在我检查页面并运行 jQuery 之后，该类并没有被删除：

<div id="MainContent_MyTreeView" onclick="OnTreeClick(event)">
    <table style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;" cellspacing="0" cellpadding="0">
    <div id="MainContent_MyTreeViewn0Nodes" style="display: block;">
        <table style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td>
                    <td>
                    <td>
                        <input name="MainContent_MyTreeViewn1CheckBox" id="MainContent_MyTreeViewn1CheckBox" type="checkbox"/>
                            <span id="MainContent_MyTreeViewst1" style="font-weight: bold; text-decoration: none;">
                                <span class="disabledTreeviewNode">
                                    Text - My Description

我需要删除的类如下底部<span>

<span class="disabledTreeviewNode">

我也尝试了以下方法，但也没有用：

     **$(treeviewClientID + ' span').filter(function () {
        return $(this);
     }).removeClass('disabledTreeviewNode');**

treeviewClientID 的值是正确的，因为我已经使用它来操作树的其他部分，以便该值正常工作且正确。

知道为什么没有在 TreeView 控件中的子 <span> 元素上删除该类，或者我可能做错了什么吗？

编辑： 将完整的 HTML 添加到 <span>，其中没有删除类。

Answer 1

根据您的代码，删除过程似乎没问题。我相信正在发生的事情（您没有说明）是您的选择器错误。我假设您将“MainContent_MyTreeView”传递给函数 EnableAllCheckBoxes。但是，在 jQuery 中要通过 ID 引用某些内容，您需要在选择器中使用“#”。要么这样调用函数：

EnableAllCheckBoxes('#MainContent_MyTreeView');

或者像这样修改函数：

function EnableAllCheckBoxes(treeviewClientID) {
     $('#' + treeviewClientID).removeClass('disabledTreeviewNode');
  }

Answer 2

您想从列表的后代中删除该类，而不是从列表本身中删除。 在这种情况下，您应该使用：

function EnableAllCheckBoxes(treeviewClientID) {
     $('span.disabledTreeviewNode', '#' + treeviewClientID).removeClass('disabledTreeviewNode');
  }

这意味着：任何 span 的 CSS 类 disabledTreeviewNode 位于 #treeviewClientID 之下，CSS 类 disabledTreeviewNode 将被删除。

---

让我们调试！

修改你的函数为：

function EnableAllCheckBoxes(treeviewClientID) {
     console.log(treeviewClientID);
     console.log($('span.disabledTreeviewNode', treeviewClientID));
     $('span.disabledTreeviewNode', treeviewClientID).removeClass('disabledTreeviewNode');
  }

按 F12，移至 控制台 标签并刷新页面。验证控制台记录的内容并尝试对其进行故障排除。

---

编辑

根据您添加到问题中的 HTML，我确定

$('span.disabledTreeviewNode', '#MainContent_MyTreeView').removeClass('disabledTreeviewNode');

应该可以正常工作。实际上，如果您在此处打开控制台并运行

$('pre.prettyprint', '#question').removeClass('prettyprint');

您会看到它按预期工作。也是一样的道理。

你能检查一下那里是否还有其他事情发生吗？