javascript - How do I loop through divs and find the nearest span and add different things to each span? - Stack Overflow

admin管理员组

文章数量:1355665

For example say I had the following 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>

Now what I want to do is: (using jQuery)

1. Go to each <div> with the class 'div-style'
2. Find the following <span>
3. Append the current <span>'s text to the span (in effect repeating the span text within the span text, so the first span would display 'span textspan text')

For example say I had the following 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>

Now what I want to do is: (using jQuery)

1. Go to each <div> with the class 'div-style'
2. Find the following <span>
3. Append the current <span>'s text to the span (in effect repeating the span text within the span text, so the first span would display 'span textspan text')

• javascript
• jquery

Share Improve this question Follow asked Aug 24, 2016 at 3:31 JarrodJarrod 1,70522 gold badges2323 silver badges3636 bronze badges 1

• try $('.div-style').each(function(){ var t = $(this).next('span').text(); $(this).next('span').text($(this).next('span').text() + t); }) – guradio Commented Aug 24, 2016 at 3:36

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Literally a one-liner with jQuery, a little something like this:

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

<script src="https://ajax.googleapis./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>

Further reading:

• The + next sibling selector
• Passing a function to the .html() method (or you could use the .text() method instead)

Here you go: https://jsfiddle/rg9zanks/

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

You can take advantage of the + selector to avoid using the .next() function.

1. Select spans that follow elements with the class .div-style
2. Loop through using .each(), create a new span after the selected spans using after(), and populate it with the same text using .text().

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

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


})

<script src="https://ajax.googleapis./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>

Try this

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

<script src="https://ajax.googleapis./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>

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

});

本文标签：