JSFiddle - React, Tailwind, and code Playground

by EDWIN MAURICIO QUISHPE MALDONADO

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>foo</title>
  </head>

  <body>
    <ul>
        <li>
            <span class="title">footer</span>
            <ul>
                <li>
                    <span>statement</span>
                    <input type="text" value="xxxx">
                </li>
            </ul>
        </li>
        <li>
            <span class="title">landing</span>
            <ul>
                <li>
                    <span>page_title</span>
                    <input type="text" value="yyy">
                </li>
                <li>
                    <span>page_sub_title</span>
                    <input type="text" value="xxx">
                </li>
                <li>
                    <span class="title">pricing</span>
                    <ul class="level11">
                        <li>
                            <span>title</span>
                            <input type="text" value="aaa">
                        </li>
                        <li>
                            <span>cost</span>
                            <input type="text" value="xxx">
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
  </body>
</html>

JavaScript

function helper(root) {
  var result = {};
         
  $('> ul > li > span', root).each(function () {
    result[$(this).text()] = $(this).hasClass('title') ? helper($(this).parent()) : $(this).next('input').val();
  });

  return result;
}

console.log(helper('body'));