javascript - 使用 JS 访问 HTML 对象中的对象

Question

我正在玩家表 div 中创建一个 div 标签数组。我正在获取所有带有 .players 类的 div 标签。具有类名 .players 的 div 具有输入字段和内部链接字段。我希望能够操作这些(删除、添加类等...)

我认为可行的是:

$(divarray[j]+' .link').hide();
$(divarray[j]+' a').remove('.link');

但它不起作用。有什么想法吗？我敢肯定这很简单，但这是我第一次接触 JS :)

var divarray = $('#player-table > .players');
        for( var j = 0; j < 10; j++){
        $(divarray[j]).removeClass("players");
        $(divarray[j]).addClass("selected_players");
        $('#debug').append(divarray[j]);
        $(divarray[j]+' a').hide();
    }

Answer 1

首先，您不能只是将 jQuery 对象或 DOM 节点与字符串连接起来以创建新的选择器。 jQuery 为这种情况提供了方法，您已经有一个对象或 DOM 节点，并且想要找到其他相关节点。

其次，使用 jQuery 有更好的方法来处理一组元素。这是你的代码更像 jQuery 的方式。这只是一个例子，因为我不知道 HTML 结构。您必须对其进行调整，以便它选择并应用于正确的元素。

$('#player-table > .players').slice(0,10) // gets the first 10 elements
 .removeClass("players")                  // removes the class from all of them
 .addClass("selected_players")            // adds the class
 .find('a').hide().end()                  // finds all descendant links and hides them
 .appendTo('#debug');                     // appends all elements to `#debug`

如您所见，最后一行只有一个分号。这意味着整个代码块只是一个语句，但是将它分成几行可以提高可读性。

因为 fluent interface 才起作用，一个 jQuery 大量使用的概念。它可以让您避免像 ($(divarray[j])) 那样一遍又一遍地创建 jQuery 对象。

另一个优点是您可以一次处理整个元素集，而不必像使用“正常”DOM 操作方法那样显式地遍历每个元素。

对于学习 JavaScript，我推荐 MDN JavaScript Guide .
jQuery 有几个 tutorials和一个非常好的API documentation .

通读它们以了解基础知识。您不能指望在不先阅读工具说明的情况下能够使用该工具。