CalvT CalvT -3 years ago 54
jQuery Question

Add content based on what div is above

I'm working on a customization, and can't change the HTML. Unfortunately it's terrible.

It has the following format:

<div>Thursday 28-02-2015</div>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
//And so on


And I need to extract the content from the
div
, and add it as an
:after
to each table cell. So a bit of jQuery comes in handy.

var a = $("div").text();
$("td").append("<span>" + a + "</span>");


The trouble is, the HTML repeats itself. So how can I make the jQuery choose the right div? The right div is the first div above the table.

Sample HTML



<div>Thursday 28-02-2015</div>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<div>Friday 29-02-2015</div>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<div>Saturday 30-02-2015</div>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>





Expected Output



<div>Thursday 28-02-2015</div>
<table><tr><td>Some content<span>Thursday 28-02-2015</span></td></tr></table>
<table><tr><td>Some content<span>Thursday 28-02-2015</span></td></tr></table>
<table><tr><td>Some content<span>Thursday 28-02-2015</span></td></tr></table>
<div>Friday 29-02-2015</div>
<table><tr><td>Some content<span>Friday 29-02-2015</span></td></tr></table>
<table><tr><td>Some content<span>Friday 29-02-2015</span></td></tr></table>
<table><tr><td>Some content<span>Friday 29-02-2015</span></td></tr></table>
<div>Saturday 30-02-2015</div>
<table><tr><td>Some content<span>Saturday 30-02-2015</span></td></tr></table>
<table><tr><td>Some content<span>Saturday 30-02-2015</span></td></tr></table>
<table><tr><td>Some content<span>Saturday 30-02-2015</span></td></tr></table>




Answer Source

Edit: Realized I overcomplicated this. You can simply loop through each div with an .each() function and grab its contents to add into the tables after it.

You can use .next(), repeated as necessary, to get the next however many tables.

$(function(){
  $('div').each(function(){
    var a = $(this).text();
    $(this).next().find('td')
    .add($(this).next().next().find('td'))
    .add($(this).next().next().next().find('td'))
    .after('<span>' + a + '</span>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Thursday 28-02-2015</div>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<div>Friday 29-02-2015</div>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<div>Saturday 30-02-2015</div>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>
<table><tr><td>Some content</td></tr></table>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download