Question

我一直在研究这个并尝试几乎所有提供的解决方案示例但似乎无法以有意义的方式处理jQuery $('a.someclass)或$('a:contains("some text"))的返回值，例如数组列举。 .length允许您查看您返回的项目数量，如果您登录控制上面分配的变量，您可以完全转储所收集的内容，但我能做的最多就是获取有关的信息。仅限第一项。

假设我有一个像这样的HTML：

<a href="something" id="a1" class="a x">something.com</a>
<a href="anotherthing" id="a2" class="a x">anotherthing.com</a>

我尝试以两种方式之一使用jQuery来获取这些：

//grabbing any link where class = 'a x'
var links = $("a.a.x");

或者说：

//grabbing any link where the word "thing" appears
var links = $("a:contains('thing')");

我可以通过以下方式检查返回的信息：

console.log(links);
console.log(links.length);

但是，我没有找到解析第一项之外的数据的方法，因为尝试将其视为数组links[i]提供了一个例外，而使用links本身只能为您提供属性附于第一项而非后续项目。

例如，像这样的事情不会起作用：

if (links.length > 0) {
   for (var i = 0; i < links.length; i++) {
       console.log(links[i].attr('href'));
   };
};

虽然这样做只会有效，但仅限于第一项：

console.log(links.attr('href'));

有人可以加强我对这里发生的事情的理解，以及如何枚举和处理所有退回的项目的代码。提前谢谢。

编辑：2015年7月8日

我想感谢每个人在这方面的帮助，并花时间向我提供我将用作参考的示例。此外，我想通过合并几乎以某种方式提供给我的所有内容来创建强大且精简的代码，从而报告我能够获得所需的功能。现在，如果我能够使.trigger('click')正常运作（或更准确地 - 始终如一），那么我将绝对是金色的。

使用$("a.a.x")的代码似乎没有被触发的麻烦

if (links.length > 0){
    links.each(function(index, domElement) {
        console.log("["+index+"] "+domElement.href);
        $(domElement).trigger('click');
    });
};

但应用于links通过$("a:contains('thing')")收集的项目的相同确切代码未产生所需行为，并且未提供任何错误。真的是一个头颅。我需要以某种方式解决这个问题，因为我不会总是class或id可用，只留下contains作为唯一选项。我不想在页面上抓取所有a标签，然后单独解析它们，这看起来效率低，而且有些不雅。

Answer 1

您所拥有的断开连接是在jQuery API和本机JavaScript API之间。

使用jQuery，当你使用选择器时，它会在内部模拟一个数组。该数组基本上位于jQuery对象中。内部数组是页面上实际匹配元素的集合，这些元素将具有可用的本机JavaScript API函数。整个jQuery对象将向其公开jQuery API。

以下是代码中的内容，以及它如何应用于您的示例。

你的链接选择器很好，"a.a.x"。你有一个带有“a”类和“x”类的锚标记，你可以选择符合这些标准的标记集。你有

var links = $("a.a.x");

要记住的一件事是$只是jQuery的简写，这是一个函数。所以你正在调用该函数，它正在返回（通过一些内部进程）一个jQuery实例。所以链接现在引用了jQuery的实例。在内部，该实例（jQuery对象）包含一个变量，该变量具有与jQuery调用一起使用的选择器（参数）匹配的元素数组。通过简单地使用索引号，可以访问此数组（作为jQuery内部进程暴露元素的结果）。

您正在这里正确访问数组（或至少没有错误）：

for (var i = 0; i < links.length; i++) {
   console.log(links[i].attr('href'));
};

但是有一个问题。还记得jQuery对象的内部数组是否匹配了元素？ links[i]这里是实际的元素，并且公开了原生JavaScript API。因此，.attr 不可用。属性的getter的原生版本是“getAttribute”，您可以将上面的代码更改为

for (var i = 0; i < links.length; i++) {
   console.log(links[i].getAttribute('href'));
};

您还可以使用links[i]构造一个jQuery对象，然后访问jQuery API。

for (var i = 0; i < links.length; i++) {
   console.log($(links[i]).attr('href'));
};

正如您所希望看到的那样，这开始是多余的。通过类似的构造，并且因为links是一个jQuery对象，您可以访问jQuery API函数。这就是为什么此代码console.log(links.attr('href'));将导致href属性。但是，由于它是一个getter，jQuery在内部只会返回该集合的第一个结果。为了使用迭代方法，jQuery公开了函数each。它非常有用，并在幕后广泛使用。例如，links.css('color','blue')将在内部使用each来迭代整个链接集并将其文本颜色更改为蓝色。

你最好的就是坚持使用each。

$("a.a.x").each(function(){
    //this will now be available as the native element similar to links[i]
    console.log(this.href);//href is natively available as well
    cosnole.log(this.getAttribute('href'));//also available here
    console.log($(this).attr('href'));//and here when constructing a jQuery object as well
});

Answer 2

编写jQuery的方式与编写普通JavaScript的方式完全不同。您很少想要访问匹配的单个元素或显式循环它们。大多数情况下，您可以批量一次对所有匹配应用操作，因为大多数jQuery函数适用于列表中的所有匹配元素，例如：

$("a.a.x").addClass("link"); //Adds the class link to both elements.
$("a.a.x").css("color", "green"); //Makes both links green.

我提到你可以链接这些函数调用吗？

$("a.a.x").addclass("link").css("color", "green"); //Same as above.

有时你需要遍历所有元素。然后您可以使用each功能：

//Set the width to be equal to the height of all divs with the class square.
$("div.square").each(function() {
    //This function is called once per matched element.
    //The variable "this" contains a DOM object referencing the current element.
    side = $(this).height();
    $(this).width(side);
}

如果您只想访问单个元素，就像使用数组一样，可以使用eq：

$("a.a.x").eq(1); //Gives you the second link.
$("a.a.x:eq(1)"); //Also available as selector.

最后，如果要访问底层DOM对象而不是jQuery对象，可以使用get或括号：

$("a.a.x").get(1); //Gives you the second link, as a DOM object
$("a.a.x")[1]; //Same as above.

请记住，jQuery可以帮助您摆脱编写JavaScript的繁琐乏味的局面。当你习惯用香草的方式做事时，你可能会产生这样的代码：

//BAD CODE - DO NOT IMMITATE.
links = $("a.a.x");
for(i=0; i<links.length; i++) {
    link = links.eq(i);
    link.addClass("link");
}

这是一个可怕的代码，因为只能在一行中实现相同的功能 - 这是这个答案的所有例子中的第一个。

Answer 3

使用.each迭代器。例如：

var links = $("a.a.x");

links.each(function(index, domElement) {
console.log(index);
$(domElement).css('background', 'red');
});

btw - 还有.map，.filter，.eq和许多其他traverse集合的方法。

Answer 4

如果您的jQuery选择器是正确的，那么您应该能够遍历内容或使用.each()调用

喜欢

    var links = jQuery("a.a.x");
    links.each(function() {
        console.log(jQuery(this).attr('href'));
    });

Answer 5

你在找这样的东西吗？

var links = $("a.a.x");

links.each(function(i) {
  console.log('item ' + i, links[i]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="something" id="a1" class="a x">something.com</a>
<a href="anotherthing" id="a2" class="a x">anotherthing.com</a>

Answer 6

在下面的代码中，links [i]对象不是JQuery对象而是DOM对象，因此您应该能够访问属性，如下所示：

＆＃13;

var links = $("a.a.x");
if (links.length > 0) {
   for (var i = 0; i < links.length; i++) {
       console.log(links[i].href);
       $('#list').append('<li> href='+links[i].href +'</li>');
   };
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<a href="something" id="a1" class="a x">something.com</a>
<a href="anotherthing" id="a2" class="a x">anotherthing.com</a>

<div>
  <ul id='list'>
    </ul>
  </div>

＆＃13;

在jQuery中解析类的返回值或包含选择器

编辑：2015年7月8日

6 个答案: