JQuery seçicileri kullanarak kardeş etiketleriyle hiyerarşik nesneler nasıl oluşturulur

Question

Aşağıdaki html kod parçacığım var. Konuları ve alt konu başlıklarını almak ve nesnelere kaydetmek için sayfayı kazıyarak web'e çekmek istiyorum.

{ 
'topic': 'Java Basics', 
'subtopics':['Define the scope of variables', 'Define the structure of a Java class', ...] 
} 

Ben node.js ve JQuery için Jsdom çalışmak yapmaya çalışıyorum:

istenilen sonuç bir şeydir

var jsdom = require('jsdom'); 
var fs = require("fs"); 


var topicos = fs.readFileSync("topic.html", "utf-8"); 

    jsdom.env(topicos, ["http://code.jquery.com/jquery.js"], function (error, window) { 
     var $ = window.$; 
     var length = $('div ~ ').each(function() { 
      //??? 
      var topic = $(this); 
      var text = topic.text();     
      console.log(text.trim()) 
     }); 
    }) 

fakat jQuery deneyimi benim eksikliği nedeniyle, ben hiyerarşiyi düzgün bir şekilde organize edemiyorum.

Html pasajı: Burada

<div> 
    <strong>Java Basics&nbsp;</strong></div> 
<ul> 
    <li> 
     Define the scope of variables&nbsp;</li> 
    <li> 
     Define the structure of a Java class 
    </li> 
    <li> 
     Create executable Java applications with a main method; run a Java program from the command line; including 
     console output. 
    </li> 
    <li> 
     Import other Java packages to make them accessible in your code 
    </li> 
    <li> 
     Compare and contrast the features and components of Java such as: 
     platform independence, object orientation, encapsulation, etc. 
    </li> 
</ul> 
<div> 
    <strong>Working With Java Data Types&nbsp;</strong></div> 
<ul> 
    <li> 
     Declare and initialize variables (including casting of primitive data types) 
    </li> 
    <li> 
     Differentiate between object reference variables and primitive variables 
    </li> 
    <li> 
     Know how to read or write to object fields 
    </li> 
    <li> 
     Explain an Object's Lifecycle (creation, "dereference by reassignment" and garbage collection) 
    </li> 
    <li> 
     Develop code that uses wrapper classes such as Boolean, Double, and Integer. &nbsp;</li> 
</ul> 
... 

Answer 1

var topicos = []; 

jQuery('div').each(function(){ 
var data = {}; 
var jThis = jQuery(this); 
    data.topic = jThis.find('strong').text(); 
    data.subtopics = []; 
    jThis.next('ul').find('li').each(function(){ 
    var jThis = jQuery(this); 
    data.subtopics.push(jThis.text()); 
    }); 
topicos.push(data); 
}); 

console.log(topicos); 

fiddle pasajı çalışmıyorsa ya Ama ben çok yerine etiket isimleri seçicileri olarak İşaretlemenize sınıflar eklemek ve kullanımı öneriyoruz:

<div class="js-topic-data"> 
    <div> 
    <strong class="js-topic">Java Basics&nbsp;</strong> 
    </div> 
    <ul> 
    <li class="js-sub-topic"> 
     Define the scope of variables&nbsp;</li> 
    <li> 
    </ul> 
</div> 

Ardından şöyle bir şey yapabilirsiniz:

çok daha sağlam biçimlendirme değişiklikler vb içindir

jQuery('.js-topic-data').each(function(){ 
var data = {}; 
var jThis = jQuery(this); 
    data.topic = jThis.find('.js-topic').text(); 
    data.subtopics = []; 
    jThis.next('.js-sub-topic').each(function(){ 
    var jThis = jQuery(this); 
    data.subtopics.push(jThis.text()); 
    }); 
topicos.push(data); 
});