JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div> Works Correctly:
        <span><input style="width:2px;" />One</span>
        <span><input style="width:2px;" />Two</span>
        <span><input style="width:2px;" />Three</span>
        <a id="anchor1" href="javascript:void(0)" onclick="alert($(this).prevAll('span').first('span:has(input)').text());">test</a>
        <span><input style="width:2px;" />Five</span>
        <span><input style="width:2px;" />Six</span>
    </div>
<br/><br/><br/>
    <div> Doesn't Work Correctly:
        <span><input style="width:2px;" />One</span>
        <span><input style="width:2px;" />Two</span>
        <span><input style="width:2px;" />Three</span>
        <a id="anchor2" href="javascript:void(0)" onclick="alert($(this).prevAll('span:has(input,select,textarea)').first().text());">test</a>
        <span><input style="width:2px;" />Five</span>
        <span><input style="width:2px;" />Six</span>
    </div>

JavaScript

var 
    right = $.map( $("#anchor1").prevAll('span'), function(elem) {
       return $(elem).text();
    }), 
    wrong = $.map( $("#anchor2").prevAll('span:has(input,select,textarea)'), function(elem) {
       return $(elem).text();
    });

console.log(right.join());
console.log(wrong.join());