如何通過div循環找到最近的跨度併爲每個跨度添加不同的東西？

Question

例如說我有以下HTML：

<div class="div-style">div text</div> <span>span text</span> 
<div class="div-style">another div</div> <span>another span</span> 
<div class="div-style">hello</div> <span>world</span> 

現在我想做的是：（使用jQuery）

1. 轉到每個<div>與類「格式」
2. 找到以下內容<span>
3. 將當前<span>的文本追加到跨度（實際上在跨度文本中重複跨度文本，因此第一個跨度將顯示「跨度文本跨度文本」）

Answer 1

$('.div-style').each(function(){ 
 
var t = $(this).next('span').text(); 
 

 
$(this).next('span').text($(this).next('span').text() + t); 
 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div-style">div text</div> <span>span text</span> 
 
<div class="div-style">another div</div> <span>another span</span> 
 
<div class="div-style">hello</div> <span>world</span>

試試這個

Answer 2

$('.div-style').each(function(i, node){ 
 
    var nextSpan = $(node).next(); 
 
    nextSpan.append(nextSpan.html()); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div-style">div text</div> <span>span text</span> 
 
<div class="div-style">another div</div> <span>another span</span> 
 
<div class="div-style">hello</div> <span>world</span>

Answer 3

在這裏你去：https://jsfiddle.net/rg9zanks/

$('.div-style + span').each(function() { 
    var span = $(this) 
    span.after('<span>' + span.text() + '</span>') 
}) 

您可以利用+選擇器來避免使用.next()函數。

遵循與類 .div-style

環體通過使用.each()

1. 選擇跨度，創建使用after()選擇的跨度後，新跨越，並使用.text()相同的文字填充它。

Answer 4

字面上一行代碼使用jQuery，有一點是這樣的：

$(".div-style + span").html(function(i,v) { return v + v; });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="div-style">div text</div> <span>span text</span> 
 
<div class="div-style">another div</div> <span>another span</span> 
 
<div class="div-style">hello</div> <span>world</span>

延伸閱讀：

• The + next sibling selector
• Passing a function to the .html() method（或你可以使用.text()方法來代替）

Answer 5

$(function() { 
    $("div.div-style").next('span').each(function() { 
     $(this).append($(this).text()); 
    }); 

});