Как добавить HTML-класс на основе содержимого другого элемента?

Question

Я пытаюсь добавить класс HTML к определенному элементу на основе содержимого другого элемента.Данные этого элемента являются динамическими.Вот мой код:

<div class="container-fluid">
    <div class="row">
        <div class="task_list col-lg-12 col-sm-12">

            @foreach($tasks as $task)

            <div id="{{ $task->id }}" class="row task_element">

                <p class="task_description">
                    {{ $task->description }}
                </p>

                <p class="task_priority">
                    {{ $task->priority }}
                </p>

            </div>

            @endforeach

        </div>  
    </div>
</div>

<script>

    if ($(".task_priority").text().trim() === "high") {
        $(".task_element").addClass('high');
    } elseif ($(".task_priority").text().trim() === "medium") {
        $(".task_element").addClass('medium');
    } else ($(".task_priority").text().trim() === "low") {
        $(".task_element").addClass('low');

</script>

В настоящее время это не работает.Это кажется простой задачей, но я не смог выяснить, как ее решить.Как добавить класс в div «task_element» на основе текстового значения «task_priority»?

Answer 1

Если у вас есть 3 задачи, например, с высоким и низким средним

$(".task_priority").text().trim()

вернет highlowmedium в виде строки

Ваш последний оператор else не начинается с оператора if, а оператор не 't close.

Это должно работать:

$(document).ready(function() {
$('.task_element').each(function(index, element) {
    if ($(element).find(".task_priority").text().trim() === "high") {
        $(element).addClass('high');
    } else if ($(element).find(".task_priority").text().trim() === "medium") {
        $(element).addClass('medium');
    } else if ($(element).find(".task_priority").text().trim() === "low") {
        $(element).addClass('low');
    }
});
});

https://jsfiddle.net/3gfbh0yg/1/

Answer 2

Оберните свой js-код внутри $ (документ) .ready ()

Из документов:

$ (документ) .ready () будетзапускается только после того, как страница объектной модели документов (DOM) готова для выполнения кода JavaScript.

Ваш код становится

// A $( document ).ready() block.
$( document ).ready(function() {
    if ($(".task_priority").text().trim() === "high") {
        $(".task_element").addClass('high');
    } elseif ($(".task_priority").text().trim() === "medium") {
        $(".task_element").addClass('medium');
    } else ($(".task_priority").text().trim() === "low") {
        $(".task_element").addClass('low');
});