如何根据另一个元素的内容为HTML元素添加class？

你的代码没法正常工作主要有几个核心问题：

1. 全局选择器的逻辑错误：直接用$(".task_priority").text()只会拿到页面中第一个.task_priority元素的文本，没法对应到每个单独的任务项；同时$(".task_element").addClass()会给所有任务元素统一加同一个class，完全忽略了每个任务的优先级差异。
2. 语法错误：你的else后面跟着条件判断，这是不符合JS语法规范的，正确写法应该用else if。

下面给你两种解决方案，优先推荐第一种（后端渲染），更高效且不需要依赖前端JS：

方案一：后端Blade直接渲染class #

既然你用的是Laravel Blade模板，完全可以在渲染任务元素时直接把优先级作为class加上，页面加载完成就直接生效，不用等JS执行：

<div class="container-fluid">
  <div class="row">
    <div class="task_list col-lg-12 col-sm-12">
      @foreach($tasks as $task)
        <!-- 直接把优先级值作为class添加到task_element -->
        <div id="{{ $task->id }}" class="row task_element {{ $task->priority }}">
          <p class="task_description">{{ $task->description }}</p>
          <p class="task_priority">{{ $task->priority }}</p>
        </div>
      @endforeach
    </div>
  </div>
</div>

如果你的priority值可能存在大写或者不符合CSS命名规范的情况，可以用Blade的字符串处理方法统一转成小写：

<div id="{{ $task->id }}" class="row task_element {{ strtolower($task->priority) }}">

方案二：前端jQuery修正写法 #

如果必须用前端JS处理，需要遍历每个任务元素，单独获取它的优先级文本，再给当前元素添加对应class，同时修复语法错误，还要确保代码在DOM加载完成后执行：

<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>
// 确保DOM加载完成后执行代码
$(document).ready(function() {
  // 遍历每个任务元素
  $(".task_element").each(function() {
    // 获取当前任务元素内的优先级文本
    const priorityText = $(this).find(".task_priority").text().trim();
    
    // 根据优先级添加对应class
    if (priorityText === "high") {
      $(this).addClass("high");
    } else if (priorityText === "medium") {
      $(this).addClass("medium");
    } else if (priorityText === "low") {
      $(this).addClass("low");
    }
  });
});
</script>

这样每个任务元素都会根据自己的优先级正确添加对应的class啦～

内容的提问来源于stack exchange，提问作者develpr