jQuery循環每個元素的id

Question

嗨，我有一些關於循環邏輯的問題

有一些元素

<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元素區域屬性值插入到span元素中哪個位置相同

---

像這樣

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

Answer 1

首先請注意，在HTML中創建自己的非標准屬性可能會導致一些奇怪的行為。 使用data屬性將任何自定義元數據與元素一起存儲是更好的做法。

要解決實際問題，你需要遍歷所有div元素，然后選擇span與相關place ，並設置其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-*屬性。

Answer 2

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

Answer 3

你應該使用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>

Answer 4

你可以這樣做：

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