JSFiddle - React, Tailwind, and code Playground

by infernalbadger

HTML

<ul>
    <li>
        <a class="unitWrapper" href="location_url">
            link text
            <img src="project1.jpg">
        </a>
        <a class="unitWrapper" href="another_url">
            link text
        </a>    
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>                     
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </li>
    <li>
        <a class="unitWrapper" href="location_url">
            link text
            <img src="project1.jpg">
        </a>
        <a class="unitWrapper" href="another_url">
            link text
        </a>    
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>                     
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </li>
</ul>

CSS

.unitWrapper {
    color: red;
}

JavaScript

$('li').each(function() {
    var first = $('a.unitWrapper', this).first();
    first
        .removeClass('unitWrapper')
        .append(first.siblings())
        .contents()
        .filter(function(){                         
            return this.nodeType == 3;   //get all stray text nodes
        })        
        .wrapAll("<p/>");
});