Question

我有一个预先存在的html块，我需要使用jQuery进行更改。 HTML如下所示：

<div class="main">
    <div class="wms-column wms-column-nav">
        <div class="wms-column-nav-body">
        <div class="section">
            <h3>Recent News</h3>
            <ul class="other">
            <li>Something</li>
            </ul>
        </div>
        </div>
    </div>
</div>

我需要定位H3并更改其内部文本。但是，如果没有ID，则使用选择器进行定位非常棘手。通过其站点还有许多其他H3标签无法更改，但具有相同的选择器路径。我如何根据其内容定位此H3，然后更改它？我更喜欢插入html而不是文本的方法，因为将使用一些特殊字符。

谢谢！

Answer 1

在vanilla Javascript中：

var elements = document.getElementsByTagName('h3');
for (var i=elements.length; i-->0; ) {
    var element = elements[i];
    var text = element.textContent || element.innerText;
    if (text=='Recent News') {
       element.innerHTML = 'some new text';   
    }
}

Demonstration

Answer 2

使用jQuery：

$('h3')将选择所有标头标记。您可以单独解决这些问题：$('h3').eq(0) $('h3').eq(1)等。

您也可以轻松地遍历它们：

$('h3').each(function() {
     alert(this.text()) <-- "this" will point to the current item in the loop.
})

在循环内部，您可以访问任何当前项目的内容，属性或属性。您可以相应地建立逻辑基础。

Answer 3

您只需选择所有h3标签，然后迭代它们并检查其内容。

我会使用以下内容：

var h3Tags = document.getElementsByTagName('h3');
for (var x=0; x<h3Tags.length; x++) {
   if (h3Tags[x].innerText=='Recent News') {
      h3Tags[x].innerHTML = 'New Content';
   }
}

根据自己现有的内容替换标头标记的内容

3 个答案: