Chrome 插件 - jQuery 访问元素的子节点

Question

我正在尝试创建一个 Chrome 插件，该插件会向已定义 ul 的每个 li 元素添加一个链接。 我在使用 jQuery 访问此元素时遇到问题。

我尝试过

const ideaList = $("ul.idea-list");

但无法访问它。

我只访问 DOM 中非常高的元素。 const mainContent = $("#main-content"); 所以我试图深入了解 Children() 和 find("*")，但它不起作用。 它的长度始终为 0。

<div data-v-32ba3100="" id="main-content" class="clearfix"><!----> 
  <div data-v-4396a345="" data-v-32ba3100="" class="designlist page-wrapper">
    <multiple divs>
    <div data-v-0f00a344="" data-v-4396a345="" class="design-list-view">
          <ul data-v-0f00a344="" class="idea-list">
             <li></li>
             <li></li>  

这是从 DevTools 复制的选择器 #main-content > div > div > div > div > div.design-list-view > ul > li

//内容.js

$(document).ready(function () {
    const mainContent = $("#main-content"); // works

    const children = mainContent.find("*"); //not working

    const ideaList = $("ul.idea-list"); // not working
    console.log(ideaList);
    if (ideaList.length > 0) {
        // Select all <li> elements within the 'idea-list' <ul> using jQuery
        const liElements = ideaList.find("li");

        // Loop through the <li> elements and add a link to each one using jQuery
        liElements.each(function () {
            const link = $("<a>", {
                href: "https://www.example.com", // Replace with the desired link URL
                text: "Visit Example Website", // Replace with the desired link text
            });

            $(this).append(link);
        });
    }

});

Answer 1

在元素 ul.idea-list li 中添加了一个 MutationOberserver。因此，仅当元素存在时，该过程才会开始。