根据自己现有的内容替换标题标签的内容

问题描述：

dI有一个预先存在的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而不是文本的方法，因为一些特殊字符将被使用。

谢谢！

答

在香草的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

看起来不错。在一个拥有许多H3标签的页面的情况下，这会有多少？ – user1729506

只要你不每隔几毫就做一次，就不会有问题。如果你的表现痴迷，我只改变了一次调用长度（这不是一个数组，而是一个动态集合，所以获得长度并不是瞬时的，如果你确定只有一个元素可以改变，当它被发现时可能会中断，但不要过度优化：这是很快的 –

答

使用jQuery：

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

您还可以通过循环它们很容易：

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

在循环中，您可以访问任何当前项目的内容，属性或属性。你可以根据你的逻辑做相应的处理。

答

您只需选择所有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'; 
    } 
}

请注意，innerText仅适用于IE。 –

根据自己现有的内容替换标题标签的内容

相关推荐