JQuery通过类名获取所有元素答案

【问题标题】：JQuery get all elements by class nameJQuery通过类名获取所有元素
【发布时间】：2021-04-20 19:45:55
【问题描述】：

在学习 javscript 和 jquery 的过程中，浏览了谷歌的页面，但似乎无法正常工作。基本上我试图收集类的innerhtml，jquery 似乎比普通的javascript 被建议到一个document.write 中。

这是目前为止的代码；

<div class="mbox">Block One</div>
<div class="mbox">Block Two</div>
<div class="mbox">Block Three</div>
<div class="mbox">Block Four</div>

<script>
var mvar = $('.mbox').html();
document.write(mvar);
</script>

这样，document.write 下只显示第一个类。我怎样才能像 Block OneBlock TwoBlock Three 一样将它们全部展示出来？我的最终目标是显示它们以逗号分隔，如第一块、第二块、第三块、第四块。谢谢，出现了一堆相关问题，但似乎没有一个这么简单。

【问题讨论】：

不推荐使用document.write。

标签： javascript jquery

【解决方案1】：

一种可能的方法是使用.map() 方法：

var all = $(".mbox").map(function() {
    return this.innerHTML;
}).get();

console.log(all.join());

演示： http://jsfiddle.net/Y4bHh/

注意请不要使用document.write。出于测试目的console.log 是最好的方法。

【讨论】：

这确实有效，但是map()之后的“get()”函数调用有什么用呢？
@roneo 它返回一个普通的 JS 数组，而不是类似数组的对象，jQuery 从 map 返回。
您能详细说明一下吗？我试图寻找答案，但找不到令人满意的答案。什么是类数组对象？ “get()”函数是否适用于每次迭代？
@roneo 自己检查一下：jsfiddle.net/b5vpmyh4。否则，jQuery docs say it explicitly：由于返回值是一个 jQuery 对象，其中包含一个数组，因此在结果上调用 .get() 以使用基本数组是很常见的。
@AndrewAnderson this 指的是每次迭代的当前 DOM 元素。箭头函数不保留绑定上下文，因此 this 在那里不可用。您可以改用second callback parameter：var all = $('h3').map((_, element) => element.innerHTML).get()。

【解决方案2】：

可能不像已经发布的解决方案那样干净或高效，但是 .each() 函数呢？例如：

var mvar = "";
$(".mbox").each(function() {
    console.log($(this).html());
    mvar += $(this).html();
});
console.log(mvar);

【讨论】：

我会说这是规范的答案（以及each 的预期用例）

【解决方案3】：

使用问题中的代码，您只处理与该选择器返回的四个条目中的第一个交互。

下面的代码作为小提琴：https://jsfiddle.net/c4nhpqgb/

我想非常清楚您有四个与该选择器匹配的项目，因此您需要明确处理每个项目。使用eq() 比使用map 的答案更明确一点，尽管map 或each 是您可能在“现实生活”中使用的（jquery docs for eq here）。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    </head>

    <body>
        <div class="mbox">Block One</div>
        <div class="mbox">Block Two</div>
        <div class="mbox">Block Three</div>
        <div class="mbox">Block Four</div>

        <div id="outige"></div>
        <script>
            // using the $ prefix to use the "jQuery wrapped var" convention
            var i, $mvar = $('.mbox');

            // convenience method to display unprocessed html on the same page
            function logit( string )
            {
                var text = document.createTextNode( string );
                $('#outige').append(text);
                $('#outige').append("<br>");
            }

            logit($mvar.length);

            for (i=0; i<$mvar.length; i++)    {
                logit($mvar.eq(i).html());
            }
        </script>
    </body>

</html>

logit 调用的输出（在最初的四个 div 显示之后）：

4
Block One
Block Two
Block Three
Block Four

【讨论】：

【解决方案4】：

替代解决方案（您可以将 createElement 替换为您自己的元素）

var mvar = $('.mbox').wrapAll(document.createElement('div')).closest('div').text();
console.log(mvar);

【讨论】：

【解决方案5】：

要获取输入值，您可以执行以下操作：

 var allvendorsList = $('.vendors').map(function () {
            return this.value;
        }).get();

【讨论】：