CODEWITHSUNDEEP
javascriptjqueryhtmltagname
周世華
周世華

Reputation: 21

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?

Upvotes: 1

Views: 82

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22345

something like that ?

let possible = document.querySelectorAll('body table tbody tr td');
let position = null;


possible.forEach(e=> { if(e.textContent=='sth here') position = e; })

if(position)
  {
  let response = position.tagName.toLowerCase();
  for(;;)
    {
    let pos = position.parentNode
      , tag = pos.tagName.toLowerCase()
      ;
    response = tag + '_' + response
    position = pos  
    if(tag=='html') break
    }
  console.log( "response -> " , response )
  }
else
  console.log('none!');
table { display:none;}
<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><td>TheSame</td></tr>
    <tr><td>TheSame</td></tr>
    <tr><td>TheSame</td></tr>
  </tbody>
</table>

Upvotes: 1

User863
User863

Reputation: 20039

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>

Upvotes: 1

Related Questions