JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<div class="column">
<div class="row" id="r1">row 1</div>
<div class="row" id="r2">row 2</div>
<div class="row" id="r3">row 3</div>
</div>
<p style="margin-top: 15px">Test output</p>
<div class="out"></div>

JavaScript

var out = $('.out');
function pout(s) {
    out.append('<p>' + s + '</p>');
}
var col = $('.column');
var r2 = col.children('.row:nth-child(2)');

pout('row 2 start index (1-based): ' + (r2.index()+1));
r2.before('<div class="row" id="new">added row</div>');

var index =  (r2.index()+1);
pout('row 2 index after added row (1-based): ' + index);

var r2v = col.children('.row:nth-child(' + index + ')');
pout('children(nth-child(' + index + ')) <b>' + r2v.attr('id') + '</b>');

var r2x = col.find('.row:nth-child(' + index + ')');
pout('find(nth-child(' + index + ')) <b>' + r2x.attr('id') + '</b>');

col.children().each(function(n, t){
    pout((n+1)+" "+this.className+" "+this.id);
});