Tarun Rathore Ответов: 1

Как изменить цвет конкретного слова каждого объекта массива ?

Используя следующий код, я могу изменить цвет слова, встречающегося в пятой позиции. Я хочу изменить цвет слов, встречающихся в разных позициях, например, пятое слово первого вопроса, затем третье слово второго вопроса, второе слово третьего вопроса и так далее.

Как я могу этого достичь ? Не могли бы вы пожалуйста помочь мне с кодом.

Что я уже пробовал:

<div id="inner">
    <h1> Rewrite using the noun form. </h1><br>
    <p class="input"> </p>
    <p class="input"> </p>
    <p class="input"> </p>
</div>
#inner {
    text-align: center;
}

.input {
    font-size: 1.5rem;
    margin-top: 30px;
}

.a:nth-child(5) {
    color: green;
}
var questions = [
    {
        question: "1. I requested my boss.",
        answer: "She made a request to my boss.",
    },
    {
        question: "2. He prepared for exams.",
        answer: "He made preparations for exams.",
    },
    {
        question: "3. I did my job perfectly.",
        answer: "I did my job with perfection.",
    },
];

$.each(questions, function(i, x) {
    arr = '<span>' + x.question.split(/\s+/).join('</span> <span class="a">') + '</span>';

    $('.input').eq(i).append(arr);
});
Сайт CodePen ссылку: Ручка Таруном более профессором-большая честь[^]

1 Ответов

Рейтинг:
11

Richard Deeming

Воспользуйся nth-of-type чтобы выбрать <p> элемент, и совместить с nth-child чтобы выбрать слово.

Например:

/* Fifth word of first question: */
#inner p:nth-of-type(1) .a:nth-child(5) {
    color: green;
}

/* Third word of second question: */
#inner p:nth-of-type(2) .a:nth-child(3) {
    color: green;
}

/* Second word of third question: */
#inner p:nth-of-type(3) .a:nth-child(2) {
    color: green;
}
NB: Селектор .a:nth-child(5) выбирает пятый дочерний элемент, если он также имеет класс a, А не пятый из дочерних элементов, которые имеют класс a... Нет никакого nth-of-class селектор.

В результате номер вопроса включается в число слов. Второе слово третьего вопроса - "я", а не "сделал".

:nth-of-type() - CSS: Каскадные Таблицы Стилей | MDN[^]
:nth-child() - CSS: Каскадные Таблицы Стилей | MDN[^]