JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>ダミーで作成したXMLをhasでパースする</h1>
<h2>$("data",$(xml))</h2>
<div id="rs1"></div>
<h2>$("data item",$(xml))</h2>
<div id="rs2"></div>
<h2>$("data:has(item[id=item5])",$(xml))</h2>
<div id="rs3"></div>
<h2>$("data:has(item[id=item5])",$(xml))</h2>
<div id="rs4"></div>
<h2>$("data",$(xml)).has("item[id=item5]")</h2>
<div id="rs5"></div>
<h2>$("data",$(xml)).has($("item[id=item5]",xml))</h2>
<div id="rs6"></div>
<h2>$("data",$(xml)).children("item[id=item5]").parent()</h2>
<div id="rs7"></div>

CSS

div {padding:5px;border:1px solid #333;}
.parent{ border-color:red;}
.child { border-color:blue; margin-bottom:5px;}
.children { border-color:green; }
h2{font-size:16px;margin:15px 0 10px;padding:0;}

JavaScript

$(function(){

  var dP = new DOMParser();
  var xmlText = '<?xml version="1.0" encoding="UTF-8"?>\
    <rss>\
      <data id="data1">\
        <item id="item1">item1</item>\
        <item id="item2">item2</item>\
        <item id="item3">item3</item>\
        <item id="item4">item4</item>\
      </data>\
      <data id="data2">\
        <item id="item5">item5</item>\
        <item id="item6">item6</item>\
        <item id="item7">item7</item>\
        <item id="item8">item8</item>\
      </data>\
    </rss>';
  var xml = dP.parseFromString(xmlText, "text/xml");

  var p1 = $("data",$(xml));
  $("#rs1").html( ((p1.length>0)?"success <b>"+p1.text()+"</b>":"error") );
  var p2 = $("data",$(xml));
  $("#rs2").html( ((p2.length>0)?"success <b>"+p2.text()+"</b>":"error") );
  var p3 = $("data item",$(xml));
  $("#rs3").html( ((p3.length>0)?"success : <b>"+p3.text()+"</b>":"error") );
  var p4 = $("data:has(item[id=item5])",$(xml));
  $("#rs4").html( ((p4.length>0)?"success <b>"+p4.text()+"</b>":"error") ); 
  var p5 = $("data",$(xml)).has("item[id=item5]");
  $("#rs5").html( ((p5.length>0)?"success <b>"+p5.text()+"</b>":"error") );
  var p6 = $("data",$(xml)).has($("item[id=item5]",xml));
  $("#rs6").html( ((p6.length>0)?"success <b>"+p6.text()+"</b>":"error") );
  var p7 = $("data",$(xml)).children("item[id=item5]").parent();
  $("#rs7").html( ((p7.length>0)?"success <b>"+p7.text()+"</b>":"error") );

});