jQuery循环每个元素的id答案

【问题标题】：jQuery Loop by id for each elementjQuery循环每个元素的id
【发布时间】：2017-10-07 23:13:49
【问题描述】：

嗨，我对循环的逻辑有一些问题

有几个元素

<div place="1" area="Text 1" class="element"></div>
<div place="2" area="Text 2" class="element"></div>
<div place="3" area="Text 3" class="element"></div>

和

<span place="1"></span>
<span place="2"></span>
<span place="3"></span>

我想将所有 div 元素的 area 属性值插入到相同位置的 span 元素中

喜欢这个

<span place="1">Text 1</span>
<span place="2">Text 2</span>
<span place="3">Text 3</span>

【问题讨论】：

标签： javascript jquery html loops

【解决方案1】：

首先请注意，在 HTML 中创建自己的非标准属性会导致一些奇怪的行为。使用data 属性将任何自定义元数据与元素一起存储是更好的做法。

要解决您的实际问题，您需要遍历所有 div 元素，然后选择带有相关 place 的 span 并设置其 text()，如下所示：

$('.element').each(function() {
  $('span[data-place="' + $(this).data('place') + '"]').text($(this).data('area'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-place="1" data-area="Text 1" class="element"></div>
<div data-place="2" data-area="Text 2" class="element"></div>
<div data-place="3" data-area="Text 3" class="element"></div>

<span data-place="1"></span>
<span data-place="2"></span>
<span data-place="3"></span>

注意示例中data-* 属性的使用。

【讨论】：

谢谢，我也想循环我的 div 元素的几个属性，我们可以循环完整的 div 并查看每个 div 属性然后替换
对不起，我不明白你的意思

【解决方案2】：

你应该使用 data- 属性来制作类似的东西：

$( ".element" ).each(function(  ) {
  var place = $(this).attr("data-place");
  var area = $(this).attr("data-area");

  $('.place-'+place).html( area );
});

你的 HTML 结构应该是这样的：

<div class="element" data-area="test 1" data-place="1"></div>
<div class="element" data-area="test 2" data-place="2"></div>
<div class="element" data-area="test 3" data-place="3"></div>


<span class="place-1"></span>
<span class="place-2"></span>
<span class="place-3"></span>

【讨论】：

【解决方案3】：

使用jQuery查看下面的答案

$(document).ready(function(){

  $("div[place]").each(function(i,el){
    $("span[place='"+$(this).attr("place")+"']").html($(this).attr("area"));
  })
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div place="1" area="Text 1" class="element"></div>
<div place="2" area="Text 2" class="element"></div>
<div place="3" area="Text 3" class="element"></div>

<span place="1"></span>
<span place="2"></span>
<span place="3"></span>

【讨论】：

【解决方案4】：

你可以这样做：

$('.element').each(function(i, obj) {
    var area= $(obj).attr('area');
    var span = $('<span></span>');
    span.attr('place', i);
    span.text(area);
});

【讨论】：