JSFiddle - React, Tailwind, and code Playground

by aaccioly

HTML

<link rel="stylesheet" href="http://www.something.com/style.css">
<a href="http://www.something.com">Some link</a> 
<br />
<img src="http://www.something.com/image.jpg" alt="Some Image" />
<p>Something else</p>
<p data-something="http://www.something.com">Some paragraph with custom attribute</p>
<div id="test"> 
    <a href="http://www.something.com">Some link inside the div</a>
    <br />
    <img src="http://www.something.com/image.jpg" alt="Some Image inside the div" />
    <p>Something else inside the div</p>
    <p data-something="http://www.something.com">Some paragraph with custom attribute inside the div</p>
</div>

CSS

#test {
   margin-left: 20px;
}

JavaScript

$.expr[':'].hasAttrStartingWithValue = function (obj, index, meta) {

    var startsWithAttrValue = false;
    var value = meta[3];

    for (var i = 0; i < obj.attributes.length; i++) {
        var attr = obj.attributes[i];
        // attr.value starts with value
        if (attr.specified && attr.value.lastIndexOf(value, 0) === 0) {
            startsWithAttrValue = true;
            break;
        }
    }

    return startsWithAttrValue;
};

$(":hasAttrStartingWithValue('http://www.something.com')").each(function (i, e) {
    console.log(i + " - " + e.outerHTML);
});
$("#test :hasAttrStartingWithValue('http://www.something.com')").css('background-color', 'red');