用 JS 更改 link 标题

Question

如何在不添加 id/classes 的情况下使用 JS 更改第一个 link 的 text/name（所有项目）。

<ul>
<li class="current"><a data-filter="*" href="#">All Items</a></li>
<li class="cat-item cat-item-94"><a href="#" data-filter=".term-94" title="View all items filed under Oslavy"> Oslavy</a></li>
<li class="cat-item cat-item-93"><a href="#" data-filter=".term-93" title="View all items filed under Svadby">Svadby</a></li>
</ul>

谢谢

Answer 1

抓取带document.querySelector的元素然后直接修改为title属性:

document.querySelector('[data-filter="*"]').title = "Banana";

<ul>
<li class="current"><a data-filter="*" href="#">All Items</a></li>
<li class="cat-item cat-item-94"><a href="#" data-filter=".term-94" title="View all items filed under Oslavy"> Oslavy</a></li>
<li class="cat-item cat-item-93"><a href="#" data-filter=".term-93" title="View all items filed under Svadby">Svadby</a></li>
</ul>

Answer 2

假设您要更改的 link 将 只有其 parent "current" 为 class 和 link 是 parent 中的第一个 child，您可以尝试跟随。

window.onload = function()
{
document.getElementsByClassName('current')[0].childNodes[0].innerHTML="Hello";
 }

<ul>
<li class="current"><a data-filter="*" href="#">All Items</a></li>
<li class="cat-item cat-item-94"><a href="#" data-filter=".term-94" title="View all items filed under Oslavy"> Oslavy</a></li>
<li class="cat-item cat-item-93"><a href="#" data-filter=".term-93" title="View all items filed under Svadby">Svadby</a></li>
</ul>

Answer 3

假设您使用的是 jQuery，有多种方法可以更新第一个列表项，具体取决于 HTML 的构建方式。

如果您确定 current class 的项目永远是第一个 :

$('ul li.current a').html('Banana');

如果您更喜欢依赖列表项的出现顺序，只需取第一个：

$('ul li:first-child a').html('Apple');

注意：注意不要使用过于通用的选择器。整个页面上可能有不需要的更改。在您的情况下，最好有一个清晰可辨的父容器并使用它来安全地定位您的列表。

用 JS 更改 link 标题

Change link title with JS

javascript

anchor

jquery

text

hyperlink