Question

我使用.each（）迭代div的内容并返回所有img标签（这些标签被烦人地包裹在他们自己的div中）。在控制台中，我看到正在检索所有4个img标签。

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

我需要把＆lt; br /＆gt;在它们之间，然后将这个HTML块变成一个变量，用于AJAX调用。

＆＃13;

$(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);
                }
            });
        });
    });

＆＃13;

<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>

＆＃13;

Answer 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>

如何从JQuery获取元素列表（）

1 个答案: