使用 Jquery 导航 DOM 树 (label-class-div)答案

【问题标题】：Navigate DOM tree (label-class-div) with Jquery使用 Jquery 导航 DOM 树 (label-class-div)
【发布时间】：2013-07-14 18:55:55
【问题描述】：

我有一个这样的 DOM 结构

div id=1
  div id=2
    div class=a
       label

  div id=3

  div id=4
    span class=aa
    span class=bb
    span class=cc

现在，通过调用“label”，我想更改“cc”类的 css；我想通过 DOM 树访问它，因为“id=1” div 被迭代 N 次：我如何使用 jquery 访问“cc”？？

谢谢！！

【问题讨论】：

标签： jquery html css dom

【解决方案1】：

假设您的意思是在label 上的事件处理程序中，您可以使用parent().parent().parent().find(".cc") 来处理它，如下所示：

$("selector for the label").click(function() {
    var cc = $(this).parent().parent().parent().find(".cc");
    // ...
});

如果您可以向该顶级 div 添加一个类（使用id=1），那会更简洁：

$("selector for the label").click(function() {
    var cc = $(this).closest(".top-level").find(".cc");
    // ...
});

来自您下面的评论：

这与我的情况有点不同：标签有一个调用 jquery-ajax 调用的 onClick 函数；在 ajax 响应时，我必须调用更改 css 函数。

在标记中使用onxyz 属性是相当过时的，但您仍然可以根据需要使用它，只需确保将this 传递到您调用的函数中：

<label onclick="doSomething(this)">...</label>

function doSomething(label) {
    var cc = $(label).parent().parent().parent().find(".cc");
    $.ajax({
        /*...misc params...*/
        success: function() {
            cc.css(/*....*/);
        }
    });
}

【讨论】：

这与我的情况有点不同：标签有一个 onClick 函数，它调用 jquery-ajax 调用；在 ajax 响应中，我必须调用更改 css 函数。我尝试使用以下方式： label -> onClick= myFunction(this) ; ajax -> 成功 -> myFunction(label) { var cc= label.parent().parent().parent().find(".cc");但在 ajax 调用之后，我收到“label.parent 不是函数”错误。有人吗？
@SotirisAkisMitracos：在您的问题中提及这一点会很有用。我在答案中添加了一些内容。
@SotirisAkisMitracos：重新编辑您的评论：您收到该错误是因为您尝试在非 jQuery 对象 (HTMLLabelElement) 上调用 jQuery 函数 (parent)。您需要通过$(label) 将元素包装在一个jQuery 对象中。有趣的是，当您编辑评论时，这正是我在编辑上述答案时使用的确切名称。 :-)