Question

我需要一些亮点，我是jquery的新手，我正在尝试创建一个div来显示下面其他div的内部文本，我不确定我是否使用最好的方法，每次我尝试创建一个不起作用的变量：（

这是一个小提琴：

和我正在使用的代码

$(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')时，它会返回一个jQuery对象数组。在你执行$('.foot').html()之前，这仍然是正常的，因为默认情况下，只为数组提供了第一个元素的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

1 个答案: