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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14308588/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 13:26:29  来源:igfitidea点击:

Simple jQuery selector only selects first element in Chrome..?

jquerygoogle-chromeweb-scraping

提问by fbonetti

I'm a bit new to jQuery so forgive me for being dense. I want to select all <td>elements on a particular page via Chrome's JS console:

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

$('td')

Yet when I do this, I get the following output:

然而,当我这样做时,我得到以下输出:

<td>Apples</td>

Isn't jQuery supposed to return an array of elements with the <td>tag? Why am I only seeing the first element that matches this criteria?

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

Here is the site in question: http://www.w3schools.com/html/html_tables.asp

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

EDIT: I'd like to add that when I type a jQuery function into Chrome console, I do NOT get a jQuery object back. I get a plain HTML element. Something must be wrong with the way my Chrome is set-up/configured.

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

回答by Gras Double

If jQuery isn't present on the webpage, and of course no other code assigns something to $, Chrome's JS console assigns $a shortcut to document.querySelector().

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

You can achieve what you want with $$(), which is assigned by the console a shortcut to document.querySelectorAll().

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

To know if the page contains jQuery, you can execute jQueryin the console. To know if jQuery is assigned to $, you can execute $().jquerywhich will return jQuery version if that's the case.

要知道页面是否包含 jQuery,您可以jQuery在控制台中执行。要知道 jQuery 是否已分配给$,您可以执行$().jquerywhich 将返回 jQuery 版本(如果是这种情况)。

Also, there are browser addons to inject jQuery in every webpage.

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

回答by rdonatoiop

It seems jQuery is not properly included to run on your target page. I had a similar problem and solved as follows for Google Chrome.

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

Add a bookmark to your Chrome browser containing the following one-liner code as the URL field (it's beautified for readability):

在您的 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", "");
})();

Then just click that bookmark to run it. It is expected to include jQuery normally and make the console to return something like function (e,t){return new b.fn.init(e,t,r)}as you type in $.

然后只需单击该书签即可运行它。预计它会正常包含 jQuery 并使控制台在function (e,t){return new b.fn.init(e,t,r)}您输入$.

The process of creating the bookmark (also called bookmarklet) is a short-hand for injecting jQuery in every page you wish to work on with the console. However, the snippet code also works if you copy-paste it directly into the JS console.

创建书签(也称为 bookmarklet)的过程是在您希望使用控制台处理的每个页面中注入 jQuery 的简写。但是,如果您将代码段直接复制粘贴到 JS 控制台中,它也可以工作。

PS: Credits for the snippet is not mine, since I'm using it for a while and can't remember where I get that from.

PS:该片段的积分不是我的,因为我使用了一段时间并且不记得我从哪里得到的。

Hope it helps.

希望能帮助到你。

回答by jfriend00

If jQuery is installed and if the $symbol is shorthand for jQuery, then $('td')returns a jQuery object. But, in the w3schools page you linked, I don't see that jQuery is even present.

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

If jQuery was present and the debugger has not overriden the $symbol, then $('td')would return a jQuery object. The jQuery object is an array-like object (has some properties of an array), but it is not an actual array. If you are looking at things in the console, then you will have to make sure you are looking at the DOM elements themselves, not at the containing jQuery object.

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

If you want to get an actual array of DOM elements, you can do this:

如果你想获得一个实际的 DOM 元素数组,你可以这样做:

$('td').get();

which will return an array of DOM elements.

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

If that doesn't work, then you should examine the timing of your call to $('td').get()to make sure that all tditems you want are in the page before you search for them.

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

回答by Zappa

Also if you are trying to do something with each of the td's you would need to use a .each()to loop through them. For example:

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

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