如何从 JQuery each() 中获取元素列表

Posted 2023-03-17

【中文标题】如何从 JQuery each() 中获取元素列表

【英文标题】：How to get a list of elements from JQuery each()

【发布时间】：2018-11-09 21:48:48

【问题描述】：

我正在使用 .each() 遍历 div 的内容并返回所有 img 标签（烦人地包裹在自己的 div 中）。在控制台中，我看到正在检索所有 4 个 img 标签。

我不知道如何将数据解析成 4 个单独的标签。

我需要将 放在它们之间，然后将那段 html 转换为变量，用于 AJAX 调用。

$(function() 
        $("button").click(function()
            $('.module-added').each(function()            
                $foo = $(this).html();
                $('#links').html($foo);
            );

            $.ajax(
                method: 'POST',
                url: 'temp.php',
                datatype: 'json',
                data: 
                    page_title: 'A new mockup',
                    //modules: $BIG_CHUNK_O_HTML
                ,
                success: function(data)
                    alert(data);
                
            );
        );
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
    <div id="module">
        <div class="module-added">
            <img id="1" class="module-image" src="https://pbs.twimg.com/profile_images/931581316503691265/sFneyAO0_400x400.jpg">
        </div>
        <div class="module-added">
            <img id="2" src="https://d3ieicw58ybon5.cloudfront.net/ex/350.420/shop/product/7c7a9959a242428aa5ef41ce3c739b84.jpg">
        </div>
        <div class="module-added">
            <img id="3" src="https://vignette.wikia.nocookie.net/wallaceandgromit/images/f/f9/Wallace-Gromit-The-Wrong-Trousers-aardman-6899786-500-375.jpg/revision/latest?cb=20140526032207">
        </div>
        <div class="module-added">
            <img id="4" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/ec/Wallace_and_gromit.jpg/250px-Wallace_and_gromit.jpg">
        </div>
    </div>
    <div id='links'></div>

【参考方案1】：

使用.map() 和.join() 将所有HTML 与它们之间的<br> 连接起来，然后将其放入DIV。

$(function() 
  $("button").click(function() 
    $foo = $('.module-added').map(function() 
      return $(this).html();
    ).get().join("<br>");
    $('#links').html($foo);
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<div id="module">
  <div class="module-added">
    <img id="1" class="module-image" src="http://damcms.local/wp-content/uploads/2018/03/Mordecai-e1521130016403.png">
  </div>
  <div class="module-added">
    <img id="2" src="http://damcms.local/wp-content/uploads/2018/03/gromit-e1521130041157.jpg">
  </div>
  <div class="module-added">
    <img id="3" src="https://vignette.wikia.nocookie.net/wallaceandgromit/images/f/f9/Wallace-Gromit-The-Wrong-Trousers-aardman-6899786-500-375.jpg/revision/latest?cb=20140526032207">
  </div>
  <div class="module-added">
    <img id="4" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/ec/Wallace_and_gromit.jpg/250px-Wallace_and_gromit.jpg">
  </div>
</div>
<div id='links'></div>

【讨论】：

我无法让它工作，然后我走开了，吃了墨西哥卷饼，现在它完美地工作了。谢谢你，谢谢你，谢谢你！！我有一种预感 map() 需要发挥作用，但我想不通。 join() 也正是我所需要的。

下次我的代码无法正常工作时，我必须记住有关墨西哥卷饼的事。 :)