JSFiddle - React, Tailwind, and code Playground

by adrianlynch

HTML

<ul>
    <li><strong>list</strong> item 1 - one strong tag</li>
    <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
    <li>list item 3</li>
    <li><span class="info">list item 4</span></li>
    <li><span class="info test">list item 5</span></li>
    <li>list item 6</li>
    <li><span class="test">list item 6</span></li>
</ul>

CSS

body {
    font-family: helvetica, sans-serif;
}

li {
    padding: 3px;
}

.info {
    color: orange;
}

.result {
    background-color: #ccc;
    color: #fff;
    text-align: center;
    display: inline-block;
    border-radius: 12px;
    width: 24px;
    height: 24px;
    line-height: 1.4;
}

.match {
    background-color: green;
}

JavaScript

/*
    Problem: Select items if it does not contain a certain element using an *if* statement.
*/
$('li').each(function () {
    if(!$(this).find('span').is('.info')) {
        $(this).append(' <span class="result match">y</span>');
    } else {
        $(this).append(' <span class="result">x</span>');   
    }
});