Javascript 如果包含多个子元素，如何更改元素文本

我想操纵注释文本，使其仅在包含默认注释时不显示注释。默认注释将被隐藏，但会添加到计数器中。所以它是隐藏的，我希望评论显示没有评论，即使计数器可能在3。希望这是有意义的

我目前有这个jQuery

$("p:contains('Default Comment')").parent().hide(); 

以下是我的代码示例：

<div id="parent">
   <h4>Comments</h4>
   <ul>
    <li style="display:none;>Default Comment</li>
    <li style="display:none;>Default Comment</li>
    <li style="display:none;>Default Comment</li>
  </ul>
</div>
<div id="parent">
  Comments
  <ul>
    <li>Custom Comment</li>
    <li style="display:none;>Default Comment</li>
    <li>Custom Comment</li>
  </ul>

这就是我想要发生的事情

<div id="parent">
 <h4>**No Comments**</h4>
  <ul>
    <li style="display:none;>Default Comment</li>
    <li style="display:none;>Default Comment</li>
    <li style="display:none;>Default Comment</li>
  </ul>
</div>
<div id="parent">Comments</div>
  <ul>
    <li>Custom Comment</li>
    <li style="display:none;>Default Comment</li>
    <li>Custom Comment</li>
  </ul>
</div>

---

非常感谢任何指导

HTML的文本实际上被包装在一个不可见的textNode中，您可以使用元素的childNodes属性访问它

在您的情况下，它将如下所示：

var commentsParent1 = document.querySelector("div.parent:nth-child(1)");

// Text node is the first child in this case
var textNode = commentsParent1.childNodes[0];

// Now we can modify it's text content
textNode.textContent = "**No Comments**";

编辑：在看到关于问题的进一步澄清之后

要检测comments部分仅包含默认注释并相应地替换其标签，必须循环浏览列表的内容。为了使其更具可读性，您可以将其包装在一个函数中，该函数在单个注释部分上运行：

function updateCommentsSection (commentsSection) {
    // Select all comments in the list
    var comments = commentsSection.querySelectorAll("ul li");

    // Convert nodesList to an instance of Array
    var commentsArray = [ ...comments ];

    // Detect non-default comments
    var hasNonDefaultComment = commentsArray.some(function (comment) {
        return comment.textContent !== "Default Comment";
    });

    if (hasNonDefaultComment) {
        // No need to change anything
        return;
    }

    // Default comments only, change the content of the parent
    var textNode = commentsSection.childNodes[0];

    textNode.textContent = "**No Comments**";
}

// Example call to the function, you can use another for-loop to iterate over all the comment sections
updateCommentsSection(document.querySelector("div.parent:nth-child(1)"));

// Example loop that iterates over all comment sections
[ ...document.querySelectorAll("div.parent") ].forEach(function (commentsSection) {
    updateCommentsSection(commentsSection);
}

---

要实现这一点，您可以在.parent元素中循环并检查以查找其中可见的li元素的数量。如果没有，则可以更改第一个节点中的文本。试试这个：

$'.parent'.eachfunction{ var comments=$this.find'li:visible'。长度； $this.contents[0]。textContent=comments？'comments'：'No comments'； }; 评论 默认注释 默认注释 默认注释 评论 自定义注释 默认注释 自定义注释

---

在您发布的代码中有一个额外的结束div。父div在注释文本后关闭，但是ul closes后存在另一个关闭标记。您可以详细说明基于什么应该发生什么吗？请更具体地说明您的问题，您甚至还没有定义您想要做什么。只有两个密码。为了什么目的或使用什么都不知道。不知道你是如何得到这个值的？你需要遍历每个组并检查是否有任何可见的li元素：什么是逻辑？如果放置在.parent中的所有li都具有display:none样式，那么.parent内容应该替换为No Comments，不是吗？这会更改文本，但是OP如何检测相关ul中是否有任何隐藏的注释？这不是他的问题。考虑到输入/输出，它似乎是。对我来说，这并不清楚-这两个GIST之间的唯一区别是第一个注释部分中的更改文本。他在那里也有3条隐藏的评论，所以我不知道为什么你认为这意味着这些评论不在那里，所以可以说它们可能被隐藏起来，等待用户采取行动。如果OP想检测评论是否存在，他应该在问题本身中这样说。如果评论不可见，那么上面的标题应该显示“无评论”。。。无论哪种方式，OP最好确认他们的要求。我认为这真的很接近！我不得不做一些编辑，因为这不是我的确切代码。如果这是一个ID并且在h4标记中，我将如何操作它？$'h4'。每个函数{var comments=$this.find'li:visible.length；$this.contents[0]。textContent=comments？'comments'：'No comments'；}；这就是我所拥有的，但是它将所有的评论都改为无评论。我不确定，但我认为它可能在一篇有非默认评论的帖子中捕捉到了一条不可见的评论。编辑：我把一个改成了所有的自定义注释，但仍然没有显示任何注释