javascript - 如果包含多个特定子项，如何更改元素文本

Question

我想操纵评论文本，使其仅在包含默认评论时不显示任何评论。该默认评论被隐藏但添加到计数器中。所以它是隐藏的 我希望评论显示 No Comments，即使计数器可能是 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>

非常感谢任何指导

Answer 1

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**";

---

编辑:在看到有关问题的进一步说明之后。

要检测评论部分是否有“默认评论”并相应地替换它的“标签”，您必须遍历列表的内容。为了使其更具可读性，您可以将其包装在一个对单个评论部分进行操作的函数中:

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