如何循环遍历 div 并找到最近的跨度并向每个跨度添加不同的内容？答案

【问题标题】：How do I loop through divs and find the nearest span and add different things to each span?如何循环遍历 div 并找到最近的跨度并向每个跨度添加不同的内容？
【发布时间】：2023-04-07 23:55:01
【问题描述】：

例如，假设我有以下 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）

使用“div-style”类访问每个<div>
找到以下<span>
将当前<span> 的文本附加到跨度（实际上是在跨度文本中重复跨度文本，因此第一个跨度将显示“跨度文本跨度文本”）

【问题讨论】：

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

标签： javascript jquery

【解决方案1】：

从字面上看是一个带有 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() 方法）

【讨论】：

嘿嘿，你用了我的+ 标志。我猜你也学到了一些东西：p。我会给你一个赞成票，向我展示你可以将一个函数传递给 .html() 方法。
@AR7 - 是的，谢谢老兄。你让我想起了我已经知道但似乎从未记得使用过的东西。肯定比使用.next() 更简洁，尤其是当我显然是在简短地拍摄时。许多 jQuery 方法允许您以这种方式传递函数（.text()、.css() 等）。

【解决方案2】：

给你：https://jsfiddle.net/rg9zanks/

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

您可以利用+ 选择器来避免使用.next() 函数。

选择类.div-style的元素后面的跨度
使用.each() 循环，使用after() 在选定的跨度之后创建一个新跨度，并使用.text() 使用相同的文本填充它。

【讨论】：

与相邻的兄弟选择器一起工作很好。我给了你一个赞成票，提醒我使用它而不是 .next()（并且当我将它编辑到我现有的答案中时没有抱怨）。
@nnnnnn 在追求那个甜蜜的代表时一切都公平：p
嗯...通常我尽量不让其他答案影响我（尽管我确实浏览了早期的答案以仔细检查我没有发布重复），但在这种情况下，我认为我的答案的关键部分是使用.html() 的隐式循环，所以添加+ 只是一个奖励。

【解决方案3】：

$('.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>

试试这个

【讨论】：

【解决方案4】：

$('.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>

【讨论】：

【解决方案5】：

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

});

【讨论】：