Как изменить <li>значение в <ul>

Question

Я хочу изменить определенное значение li, у которого нет идентификатора, как я могу получить доступ к этому li и изменить его на другое значение. в следующем коде я хочу изменить «Edit as Drop» на «Edit», используя jquery или javascript.

<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>

Answer 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>

Answer 2

я чувствую приближение отрицательных голосов ... но почему бы не добавить идентификатор и использовать innerHTML, чтобы установить значение на другое <a>

Answer 3

Вы можете использовать nth-child () для этой задачи, что-то вроде этого:

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