如何使用jquery选择器构建具有同级标记的分层对象

How to build hierarchical objects with siblings tags using jquery selectors

本文关键字：对象 分层 jquery 何使用 选择器 构建      更新时间：2023-09-26

我有下面的html片段。我想通过网页抓取页面来获取主题和子主题，并将其存储在对象中。

想要的结果是：

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

我试图让它与Node.js和JQuery:的Jsdom一起工作

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())
        });
    })

但由于我缺乏jQuery的经验，我无法正确地组织层次结构。

Html代码段：

<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>
 ...

这是工作片段fiddle

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);

但我强烈建议将类添加到标记中，并将它们用作选择器，而不是标记名：

<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>

然后你可以做一些类似的事情：

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);
});

这对于标记更改等来说要稳健得多

相关文章：