JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<div id="inputs">
 <div>
  <input type="text" id="input_1" value="foo" />
 </div>
 <div>
  <input type="text" id="input_2" value="bar" />
 </div>
 <div>
  <input type="text" id="input_3" value="lah" />
 </div>
 <p>Once this page is loaded kindly delete the text in the input box containing
 "foo", and change the text in the box containing "lah" to "foo".
 Then press the button below.
 </p>
 <button>Show Results</button>
 <div id="results" style="display:none">
  <p><code>$("#inputs input[value='foo']");</code> produces
   <span id="result_bad"></span>
  </p>
  <p><code>$("#inputs").find("input[value='foo']");</code> produces
   <span id="result_good"></span>
  </p>
 </div>
</div>

JavaScript

// #5535

var dumpnjoin=function (text)
{
    var dumper = function(c, i)
    {
        console.log("i value=" + i.value);
        text.push(i.value + ' (id=' + i.id + ')');
    }
    return dumper;
}
var joinjQueryElementValue = function(elements, delim)
{
    if (delim === undefined)
    {
        delim = ',';
    }
    var text = [];
//    var dumper = dumpnjoin(text);
//    elements.each(dumper);
    elements.each(
        function(c,i) { text.push(i.value + ' (id=' + i.id + ')'); }
    );
    return text.join(delim);
}
$("button").click(function(){
    var bad = $("#inputs input[value='foo']");
    var good = $("#inputs").find("input[value='foo']");
    var badText = "Length: " + bad.length + ". Values: "
        + joinjQueryElementValue (bad, ", ");
    var goodText = "Length: " + good.length + ". Values: "
        + joinjQueryElementValue (good, ", ");
    $("#result_bad").text(badText);
    $("#result_good").text(goodText);
    $("#results").show();
    return false;
});