Search code examples
javascriptjqueryhtmltagname

How to get the tagName's all parents in html by using JS?

There is a html, it looks like:

<html>
    <head></head>
    <body>
        <div>
            <h5 id="ca1">
                <span>text</span>
                <strong>text</strong>
                <label>text</label>
            </h5>
            <div>
                <h5 id = "ca2">

                </h5>
                <div id = "ca2body">
                    <table>
                        <tbody>
                            <tr>
                                <th><span>text</span></th>
                                <td>sth here</td>
                                <th><span>text</span></th>
                                <td>
                                  <label></label>
                                  text that i don't need
                                  <label></label>
                                  text that i don't need
                                  <label></label>
                                  text that i don't need
                                </td>
                                <script>            
                jQuery('#g2c4').change(function(){
                    if(jQuery('#g2c4').prop("checked")){ 
                        jQuery('#g2c4Span').show();
                        jQuery('.G2d').show();
                    }else{
                        jQuery('#g2c4Span').hide();
                        jQuery('.G2d').hide();                  

                        jQuery.each(jQuery('.chk_g2d'), function( index, item ) {                              
                            jQuery(item).prop('checked',false).change();
                        });
                    }                   
                });
            </script>
                            </tr>
                            <tr>
                                <th><span>text</span></th>
                                <td></td>
                                <th><span>text</span></th>
                                <td>
                                </td>
                            </tr>
                            <tr>TheSame</tr>
                            <tr>TheSame</tr>
                            <tr>TheSame</tr>
                        </tbody>
                    </table>
                </div>
                <h5 id = "ca3">

                </h5>
                <div id = "ca3body">
                    <table>
                        <tbody>
                            <tr>
                                <th><span>text</span></th>
                                <td></td>
                                <th><span>text</span></th>
                                <td></td>
                            </tr>
                            <tr>
                                <th><span>text</span></th>
                                <td></td>
                                <th><span>text</span></th>
                                <td></td>
                            </tr>
                            <tr>TheSame</tr>
                            <tr>TheSame</tr>
                            <tr>TheSame</tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

I want to get the text:"sth here" all parents tag name. And I need to let them concat to a word. just like:html_body_div_table_tbody_tr_td

How should i do?

final, I want to make a Json document.

[
{
 "html_body_div_table_tbody_tr_th_span":"text",
 "html_body_div_table_tbody_tr_td":""
}
]

I would try to make them be a dictioanary, and use the dictionary's key and keyvalue to do. Is it enough easy to do?

Solution

  • You can use parents()

    const result = $('#ca2body tr').map(function() {
    var $children = $(this).find('*:not(:has(*))')
    var object = {}

    $children.each(function() {
        let key = $(this).parents().addBack().map((_, i) => i.tagName.toLowerCase()).get().join('_')
        let val = $(this).text()
        object[key] = val
    })

    return object
}).get()


console.log(result)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <h5 id="ca1">
    <span>text</span>
    <strong>text</strong>
    <label>text</label>
  </h5>
  <div>
    <h5 id="ca2">

    </h5>
    <div id="ca2body">
      <table>
        <tbody>
          <tr>
            <th><span>text</span></th>
            <td>sth here</td>
            <th><span>text</span></th>
            <td></td>
          </tr>
          <tr>
            <th><span>text</span></th>
            <td></td>
            <th><span>text</span></th>
            <td></td>
          </tr>
          <tr>TheSame</tr>
          <tr>TheSame</tr>
          <tr>TheSame</tr>
        </tbody>
      </table>
    </div>
    <h5 id="ca3">

    </h5>
    <div id="ca3body">
      <table>
        <tbody>
          <tr>
            <th><span>text</span></th>
            <td></td>
            <th><span>text</span></th>
            <td></td>
          </tr>
          <tr>
            <th><span>text</span></th>
            <td></td>
            <th><span>text</span></th>
            <td></td>
          </tr>
          <tr>TheSame</tr>
          <tr>TheSame</tr>
          <tr>TheSame</tr>
        </tbody>
      </table>
    </div>
  </div>
</div>