htmlツリーをjqueryを使ってカスタマイズしたjsonツリーに変換するには？今のよう</p> <pre><code>{"&&":[{'||':[ {'&&':[ {"lhs": "1", "comparator": "==", "rhs":"1"} ]} ] } , {"lhs": "1", "comparator": "!=", "rhs":"0"}]} </code></pre> <p>から

Question

<ul id='parent_of_all'> 
<li> 
    <span class='operator'>&&</span> 
    <ul> 
    <li> 
     <span class='operator'>||</span> 
     <ul> 
     <li> 
      <span class='operator'>&&</span> 
      <ul> 
      <li> 
      <span class='condition'>1 == 1</span> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
    <ul> 
    <li> 
     <span class='condition'>1 != 0</span> 
    </li> 
    </ul> 
</li> 
</ul> 

、私はjQueryのは、JavaScriptの基本を知っています。私は上記の変換を達成するためにどこから考え始めるべきかを知る必要があります。

そして、htmlツリーはより多くの子どもとより複雑になる可能性があります。

Answer 1

おかげ@Alexandruと@Nenadでこれを行うことができます。私は自分でこれを完成することができました。 以下はjsonを生成する関数です。以下は

function prepare_json(current_node){ 
    var object = {} 
    var span = $(current_node).children('span') 
    if (span.hasClass('condition')){ 
     var text = span.html().split(" "); 
     object = {lhs: text[0], comparator: text[1], rhs: text[2]} 
    } 
    else if(span.hasClass('operator')){ 
     var operator = span.text() 
     object[operator] = (object[operator] || []) 
     var children = $(current_node).children('ul').children('li') 
     for(var i = 0; i < children.length; i++){ 
      var child_pql = prepare_json([children[i]]) 
      object[operator].push(child_pql) 
     } 
    } 
    return object 
} 

その関数を呼び出すコードです：スタートを与えるための

var parent_node = $('#parent_of_all').children('li') 
var json = JSON.stringify(prepare_pql_json(parent_node), null, 2) 

Answer 2

liの最初のレベルを選択する方法が必要ですが、listなどのIDを持つ親要素があると仮定しました。私は基本的なjqueryを使用して次のコードを書いて、理解できるようにしました。

var result = {}; 

var $all_li = $('#list').children('li');  // selecting the first level of li 
for(var i in $all_li){      // iterating all_li using for (you may use forEach) 

    var $current_li = $($all_li[i]);      // getting operator from first span 
    var operator = $current_li.children('span').html();  // the text of the operator 

    var $inner_spans = $current_li.find('>ul >li >span'); // getting list of children spans (from path $list>li>ul>li>span) 
    var li_spans = [];          // an array where we will put the inner span objects 
    for(var j in $inner_spans){ // iterating the inner spans 
     var text = $($inner_spans[j]).html().split(" ");  // splitting the html 
     li_spans.push({ 
      lhs: text[0], 
      comparator: text[1], 
      rhs: text[2] 
     });        // adding the splitted html to an object. Note: error if text didn't have 2 white spaces 
    } 

    result[operator] = li_spans;   // adding the operator key and li_spans value to the result json 
} 

このコードは、HTMLを解析し、result JSONを構築し、それはあなたが提供するHTML形式のために働く必要があります。エラー（不良なツリー形式など）は処理されません。 simmiar html形式です。

Answer 3

あなたはスタートを与えるためeachとmap

var obj = {} 
 
var span = $('li > span').not('ul li span').text(); 
 

 
$('ul li span').each(function() { 
 
var text = $(this).text().split(' '); 
 
obj[span] = (obj[span]||[]).concat({lhs: text[0], comparator: text[1], rhs: text[2]}); 
 
}); 
 

 
console.log(obj)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
 
    <span>&&</span> 
 
    <ul> 
 
    <li> 
 
     <span>1 == 1</span> 
 
    </li> 
 
    </ul> 
 
    <ul> 
 
    <li> 
 
     <span>1 != 0</span> 
 
    </li> 
 
    </ul> 
 
</li>