如何更改 <ul> 中的 <li> 值答案

【问题标题】：How to change <li> value in an <ul>如何更改 <ul> 中的 <li> 值
【发布时间】：2019-10-06 08:03:39
【问题描述】：

我想更改没有任何 id 的 li 的特定值，我如何访问该 li 并将其更改为另一个值。在下面的代码中，我想使用 jquery 或 javascript 将“Edit as Drop”更改为“Edit”。

<ul class="tabs--primary nav nav-tabs">
    <li class="active"><a href="/packages/50411" data-drupal-link-system-path="packages/50411" class="is-active">View<span class="visually-hidden">(active tab)</span></a></li>
    <li><a href="/packages/50411/edit" data-drupal-link-system-path="packages/50411/edit">Edit</a></li>
    <li><a href="/packages/50411/delete" data-drupal-link-system-path="packages/50411/delete">Delete</a></li>
    <li><a href="/packages/50411/edit/enrollment_drop_mode" data-drupal-link-system-path="packages/50411/edit/enrollment_drop_mode">Edit as Drop</a></li>
    <li><a href="/devel/packages/50411" data-drupal-link-system-path="devel/packages/50411">Devel</a></li>
</ul>

【问题讨论】：

标签： javascript jquery html tags

【解决方案1】：

您可以尝试使用 jQuery 的 :contains() 选择器，它选择包含指定文本的所有元素：

$('ul li a:contains(Edit as Drop)').text('Edit');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs--primary nav nav-tabs">
    <li class="active"><a href="/packages/50411" data-drupal-link-system-path="packages/50411" class="is-active">View<span class="visually-hidden">(active tab)</span></a></li>
    <li><a href="/packages/50411/edit" data-drupal-link-system-path="packages/50411/edit">Edit</a></li>
    <li><a href="/packages/50411/delete" data-drupal-link-system-path="packages/50411/delete">Delete</a></li>
    <li><a href="/packages/50411/edit/enrollment_drop_mode" data-drupal-link-system-path="packages/50411/edit/enrollment_drop_mode">Edit as Drop</a></li>
    <li><a href="/devel/packages/50411" data-drupal-link-system-path="devel/packages/50411">Devel</a></li>
</ul>

【讨论】：

【解决方案2】：

您可以使用 nth-child() 来解决这个问题，如下所示：

$( ".nav-tabs li:nth-child(4) a" ).html( "Edit" );

【讨论】：

【解决方案3】：

我能感觉到反对票的到来......但为什么不添加一个 ID 并使用 innerHTML 将值设置为另一个 <a>

【讨论】：