jquery 从不同的 div 显示 html

Question

我需要一些光，我是 jquery 的新手，我正在尝试创建一个 div 来显示下面其他 div 的内部文本，我'我不确定我是否使用了最好的方法，每次我尝试创建一个变量时它都不起作用:(

这里是 fiddle:

以及我正在使用的代码

$(document).ready(function() {

  $('.info-text').each(function() {
    $(this).after($('<div />', {
      class: $(this).attr('data-info'),
      text: ""
    }));
  });

$("div[class=" + $(".foot").attr("data-info") + "]").append($(".foot").html())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info-text" data-info="money"> money</div>
<div class="info-text" data-info="life"> life</div>
<div class="info-text" data-info="square"> square</div>
<div class="info-text"> option</div>
<div class="info-text" data-info="money"> money</div>

<div class="foot" data-info="money"> information</div>
<div class="foot" data-info="life"> red</div>

Answer 1

您有多个带有 class="foot" 的 div，这很好，但是当您使用 jQuery $('.foot') 时，它 returns 一个 jQuery 对象的数组。在您执行 $('.foot').html() 之前这仍然可以，因为这将默认为您提供数组中仅 first 元素的 html。如果你想得到全部，那么你需要设置一个循环。

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

您可以从 console.log 中看到，html 变量现在具有来自不同元素的所有 html，因此您可以随意使用该变量。

编辑：现在我明白你想通过数据值来匹配元素，所以你是这样做的：

$('.foot').each(function()
{
    $('.info-text[data-info=' + $(this).data('info') + ']').append($(this).html());
});

jquery 从不同的 div 显示 html

jquery show html from different divs

html

javascript

jquery

attr