jquery：为啥选择器返回我一个数组，但属性没有？

Posted 2023-03-05

【中文标题】jquery：为啥选择器返回我一个数组，但属性没有？

【英文标题】：jquery: why a selector returns me an array, but attribute doesnt?jquery：为什么选择器返回我一个数组，但属性没有？

【发布时间】：2011-02-08 09:14:48

【问题描述】：

我正在努力更好地理解 JQ。 我正在调用一个 JQ 对象

$(".FamiliesList li li span[class!='']").prev().find('option:selected')

这将返回给我一个数组，其中包含他们跨度父级的兄弟具有类名的所有选项。

[option, option]

现在-我想返回一个选项值的数组

$(".FamiliesList li li span[class!='']").prev().find('option:selected').attr('value')

这只会返回给我第一个子值和一个完整的值数组。

为什么？

希望能得到帮助并更好地理解 jq :)

谢谢。

【问题讨论】：

不同的方法对单个或多个元素起作用确实是不一致的。这不是 API 中唯一的不一致之处。没有什么要理解的了……如果 jQuery 的界面中有任何可以理解的哲学，那只是“让我们尽可能多地向$() 中添加不同的功能，该死的一致性”。

【参考方案1】：

我能提供的最佳答案是“这就是 API 的工作方式”。我同意你的观点，“attr”和“val”之类的东西如果返回数组会更加一致（至少在选择器匹配多个元素的情况下）。

如果需要，您可以使用 $.map 获得该效果：

var attrs = $.map($('div.something'), function(element) 
  return $(element).attr('whatever');
);

现在“attrs”将是一个数组。您也可以编写自己的函数。

无论如何，重要的是要注意有数组，然后有“jQuery 对象”。如果您考虑一下，在一组 jQuery 操作的中间中使用“attr”或“val”（或类似的东西）永远不会真正有意义。

【讨论】：

谢谢你，感谢这个线程中的每个人回答我。

在你的最后一段中没有让你太过分。为什么没有意义？这将返回一个对象 $(".FamiliesList li li span[class!='']")。它是一个属性选择器。为什么没关系？毕竟我是用 jq 来匹配 DOM 元素的，不就是她被创造出来的吗？

“jQuery 对象”是支持所有 jQuery 函数的专用数组，对象的“数组”部分的元素是一组匹配的 DOM 节点。考虑到 jQuery 的整体架构，拥有一个数组值类似于“attr”结果的 jQuery 对象并没有真正的意义。

【参考方案2】：

实际上，$(selector) 不返回数组。 $(selector) 的结果是一个 jQuery 对象，它被定义为“一组匹配的元素”。这个集合可以包含 0 个、一个或多个“元素”，但 jQuery 本身仍然是一个对象。只是一个不能容纳任何东西或东西的盒子。

那么，如果 $(...) 没有返回一个数组，那么 attr() 或 val() 返回它的原因是什么？这就是为什么属性 getter 总是（？）返回它们应用到的 jQuery 对象中的 first 元素的属性。

【讨论】：

这里变聪明了。我仍然认为这种不一致很奇怪。如果我可以通过属性返回选择器的对象，为什么我不能通过方法匹配？像 attr() 会返回第一个孩子，但 [attr=*] 不会？

【参考方案3】：

试试

$(".FamiliesList li li span[class!='']").prev().find('option:selected').each(function ()  return $(this).attr('value'); );`

【参考方案4】：

您可以使用.map() 执行此操作，如下所示：

var values = $(".FamiliesList li li span[class!='']").prev()
               .find('option:selected').map(function(function() 
                 return $(this).attr('value');
               ).get();

这将获得[value1, value2, value3]，一个包含所选选项值的数组。

【参考方案5】：

你不是在寻找类似的东西

$(".FamiliesList li li span[class!='']").prev().find('option:selected').each(function() 
  return this.attr('value');
);

Afaik，attr() 方法不适用于多个对象，因此您需要在返回的对象上调用 each()。

【讨论】：

应该是$(this) 而不是this

这里也应该提到快捷方式.val()