javascript - 根据自己现有的内容替换header标签的内容

Question

d我有一个预先存在的 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

在香草 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';   
    }
}

示范

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

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