简单的 jQuery 选择器只选择 Chrome 中的第一个元素..？

Posted 2023-02-15

【中文标题】简单的 jQuery 选择器只选择 Chrome 中的第一个元素..？

【英文标题】：Simple jQuery selector only selects first element in Chrome..?

【发布时间】：2012-12-27 19:56:47

【问题描述】：

我对 jQuery 有点陌生，所以请原谅我太密集了。我想通过 Chrome 的 JS 控制台选择特定页面上的所有 <td> 元素：

$('td')

然而，当我这样做时，我得到以下输出：

<td>Apples</td>

jQuery 不应该返回带有<td> 标签的元素数组吗？为什么我只看到符合此条件的第一个元素？

这里是有问题的网站：http://www.w3schools.com/html/html_tables.asp

编辑：我想补充一点，当我在 Chrome 控制台中键入一个 jQuery 函数时，我没有得到一个 jQuery 对象。我得到一个普通的 HTML 元素。我的 Chrome 设置/配置方式一定有问题。

【问题讨论】：

它确实选择了每个元素。 element selector

【参考方案1】：

如果网页上没有 jQuery，当然也没有其他代码为 $ 分配内容，Chrome 的 JS 控制台会为 $ 分配一个快捷方式到 document.querySelector()。

您可以使用$$() 来实现您想要的，控制台为document.querySelectorAll() 分配了一个快捷方式。

要知道页面是否包含jQuery，可以在控制台执行jQuery。要知道 jQuery 是否分配给 $，您可以执行 $().jquery，如果是这样，它将返回 jQuery 版本。

此外，还有浏览器插件可以在每个网页中注入 jQuery。

【讨论】：

次要更正：$ 不是 document.getElementById 的别名 - 它是 document.querySelector 的别名。 developers.google.com/web/tools/chrome-devtools/console/…

这个更正绝对不是小事 :-) 实际上，行为已经改变。通过谷歌搜索，我找到了WebKit ticket 92648。感谢您指出这一变化。

如果你想对每一个都进行操作你可以做[].forEach.call($$(".ClassName"), function(fe) fe.click();)

【参考方案2】：

似乎没有正确包含 jQuery 以在您的目标页面上运行。我遇到了类似的问题，并针对 Google Chrome 解决了如下问题。

在您的 Chrome 浏览器中添加一个书签，其中包含以下单行代码作为 URL 字段（为了便于阅读而对其进行了美化）：

javascript: (function () 
    var s = document.createElement('script');
    s.setAttribute('src', 'https://code.jquery.com/jquery-latest.min.js');
    if (typeof jQuery == 'undefined') 
        document.getElementsByTagName('head')[0].appendChild(s);
    
    jQuery("td.edit select option[value=BN]").attr("selected", "");
)();

然后只需单击该书签即可运行它。当您输入$ 时，预计会正常包含jQuery 并使控制台返回function (e,t)return new b.fn.init(e,t,r) 之类的内容。

创建书签（也称为书签）的过程是在您希望使用控制台处理的每个页面中注入 jQuery 的简写。但是，如果您将 sn-p 代码直接复制粘贴到 JS 控制台中，也可以使用。

PS：sn-p 的积分不是我的，因为我用了一段时间，不记得我从哪里得到的。

希望对你有帮助。

【讨论】：

如何将代码保留为 url ？我按下回车的那一刻，它被谷歌搜索（我将全向栏设置为谷歌搜索）。

使用 Chrome，在地址栏中输入 sn-p 的那一刻，字符串开头的“javascript:”部分奇怪地被省略了，该命令被解释为搜索词。我已经用 Firefox 进行了测试，但这并没有发生。直接在地址栏中使用 sn-p 时，请确保在函数声明之前输入“javascript:”。

是的，这也发生在我身上......我手动添加了“javascript：”，但仍然点击输入没有任何反应，页面重新加载或其他什么......我没有什么可以收藏跨度>

书签是存储 url 以供以后使用的简写，当您需要将 jquery 本地注入到您正在查看的给定网页中以防它尚未加载时。运行 sn-p 后（通过单击您的书签代码，在地址栏甚至在控制台中键入它），预计 jquery 会被加载，以便您使用浏览器控制台进行操作。页面（就请求而言）没有真正发生任何事情，因为它是 jquery 库的简单动态包含。希望对您有所帮助。

【参考方案3】：

如果安装了 jQuery，并且 $ 符号是 jQuery 的简写，则 $('td') 返回一个 jQuery 对象。但是，在您链接的 w3schools 页面中，我看不到 jQuery 甚至存在。

如果 jQuery 存在并且调试器没有覆盖 $ 符号，那么 $('td') 将返回一个 jQuery 对象。 jQuery 对象是一个类似数组的对象（具有数组的一些属性），但它不是一个实际的数组。如果您在控制台中查看内容，则必须确保查看的是 DOM 元素本身，而不是包含的 jQuery 对象。

如果你想得到一个实际的 DOM 元素数组，你可以这样做：

$('td').get();

这将返回一个 DOM 元素数组。

如果这不起作用，那么您应该检查调用$('td').get() 的时间，以确保您想要的所有td 项目都在页面中，然后再搜索它们。

【讨论】：

也许问题出在我的 Chrome 配置上？当我输入$('td') 时，我没有得到一个jQuery 对象……我只是得到一个普通的HTML 元素。同样，当我输入 $('td').get() 时，我收到错误消息 TypeError: Object #<HTMLTableCellElement> has no method 'get'

@effbott - Chrome 调试器可能已覆盖 $ 作为调试快捷方式。尝试使用jQuery('td')。

jfriend00，这听起来很对。当我在控制台中输入jQuery('td') 时，我收到错误消息ReferenceError: jQuery is not defined。也许我应该重新安装 Chrome？我并不总是有这个问题。

@effbott - w3schools page you linked 上似乎没有安装 jQuery。因此，您不能在该页面上使用 jQuery。

“在那个对象中是一个 DOM id 的数组” - 它是一个 DOM 元素的数组（类似对象）， 不是 DOM ids。（我相信你知道。）

【参考方案4】：

此外，如果您尝试对每个 td 执行某些操作，则需要使用 .each() 循环遍历它们。例如：

$('td').each(function() 
   //do something relevant here
);