JSFiddle - React, Tailwind, and code Playground

by Scott Godin

HTML

<div id="foo">
    <h3>heading3</h3>
    <h1>heading1</h1>
    <h2>heading2</h2>
    <p class="one"></p>
    <p class="two"></p>
    <p class="three"></p>
</div>

CSS

p { font-weight: bold; margin: 1em 0;}
p.one:before { content: "ONE: "; }
p.two:before { content: "TWO: "; }
p.three:before { content: "THREE: "; }

JavaScript

$( function () {
    var headingtext = $("#foo").find("h1,h2,h3").first().text();
    var h2text = $.grep( $("h1,h2,h3").map(function() { return $(this).text();  }).get(), function(t) { return !!t;  })[0];
    var  htext = $('h1').text() || $('h2').text() || $('h3').text();
    $("#foo p.one").text(headingtext);
    $("#foo p.two").text(h2text);
    $("#foo p.three").text(htext);
});