Как раскрасить текст тега li тега ul с помощью Javascript или JQuery?

Question

Я новичок в 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, но я мало знаю об этом.

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

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

javascript html jquery

-3

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

Answer 1

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

Получить последний дочерний элемент (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

Answer 2

<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

Answer 3

Вы можете добиться этого с помощью 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

Answer 4

Как заявили все - для этого вам не нужны 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

Answer 5

Привет, пожалуйста, посмотрите, вам не нужно повторять цикл, просто вы можете добавить 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

Answer 6

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

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

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

0

Santhoshkumar Thangavel 21 Авг 2020 в 05:26

Как раскрасить текст тега li тега ul с помощью Javascript или JQuery?

6 ответов

Похожие вопросы

Новые вопросы

javascript