Я новичок в Javascript. У меня есть следующий код html:

<body>
    <ul id="a" class="list1">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <ul id="b" class="list2">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <script type="text/javascript">      
  </script>
</body>

Как раскрасить текст для каждого последнего тега li в тегах ul ниже? Я думал установить id для каждого тега li, а затем использовать метод getElementById (), но это довольно многословно. Есть ли другой способ без изменения структуры html-кода? Могу использовать JQuery, но я мало знаю об этом.

Спасибо за вашу помощь.

введите описание изображения здесь

-3
Bình Dương 21 Авг 2020 в 08:19

6 ответов

Лучший ответ

Попробуйте это вместо этого,

Получить последний дочерний элемент (li) каждого li document.querySelectorAll("ul li:last-child")

var secondli = document.querySelectorAll("ul li:last-child");
for(i=0;i<secondli.length;i++){
  var li = secondli[i];
  li.style.color = "red";
}
<body>
    <ul id="a" class="list1">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <ul id="b" class="list2">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <script type="text/javascript">      
  </script>
</body>
0
Rayees AC 21 Авг 2020 в 05:24
<style>
li:last-child{
color:red;
}
</style>
<body>
    <ul id="a" class="list1">
    <li>Coffee</li>
    <li class="liColorChanger">Tea</li>
  </ul>
  <ul id="b" class="list2">
    <li>Coffee</li>
    <li class="liColorChanger">Tea</li>
  </ul>
  <script type="text/javascript">      
  </script>
</body>
<style>
    .liColorChanger
    {
    color:green;
        }
</style>
<body>
    <ul id="a" class="list1">
    <li>Coffee</li>
    <li class="liColorChanger">Tea</li>
  </ul>
  <ul id="b" class="list2">
    <li>Coffee</li>
    <li class="liColorChanger">Tea</li>
  </ul>
  <script type="text/javascript">      
  </script>
</body>
1
pallavi sahni 21 Авг 2020 в 05:37

Вы можете добиться этого с помощью CSS, используя: last-child

li:last-child{
color:red;
}
    <ul id="a" class="list1">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <ul id="b" class="list2">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>

В js вы также можете добиться этого, как показано ниже:

window.addEventListener('load',()=>{
document.querySelectorAll('li:last-child').forEach((elem)=>{elem.style.color='red'});
});
0
Asutosh 21 Авг 2020 в 05:31

Как заявили все - для этого вам не нужны javascript или jquery - но во имя обучения - вот способ jquery

Обходите каждый из ul - найдите li внутри и выберите последний ... затем добавьте класс - и стиль будет в классе. Всегда лучше добавить класс со стилем, чем использовать jquery для добавления css напрямую.

Но, как уже отмечалось, я бы определенно использовал только CSS и использовал псевдоселектор: last-child, как описано в других решениях.

$(document).ready(function(){
  $('ul').each(function(){
    $(this).find('li').last().addClass('red');
  })
})
.red{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="a" class="list1">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <ul id="b" class="list2">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
0
gavgrif 21 Авг 2020 в 05:42

Привет, пожалуйста, посмотрите, вам не нужно повторять цикл, просто вы можете добавить css.

Благодарность

$(document).ready(function(){
    var listA = document.querySelector("#a li:last-child");
  var listB = document.querySelector("#b li:last-child");
  listA.style.color = "red"
  listB.style.color = "red"
})
0
Sanat Gupta 21 Авг 2020 в 05:30

Используйте селектор элементов и последний дочерний селектор:

Он выбирает все последние li в ul: найдите пример ниже

ul > li:last-child{ color:red; }

0
Santhoshkumar Thangavel 21 Авг 2020 в 05:26