ajax调用后添加一个类

Question

我试图在 ajax 调用后向 li 元素添加一个类。我添加了 ajax 上下文，并且我尝试应用 css 只是为了看看它是否有效 - 它不起作用。我做错了什么？

另外，我不明白为什么如果我将 x 更改为： $('.bb-sort-list .bb-has-menu') - 删除 li - 它确实使整个 ul 列出红色。

这是我的相关 HTML——我正在从 ajax 加载 li 项目。 （我那里有一个 li 最初是隐藏的，用于另一个功能。）

<div class="bb-sort-list">
    <ul class="bb-has-menu list-unstyled show" id="bb-folder-list">
        <li id="bb-new-folder" class="active"><a href="#" class="bb-sort-name" contenteditable="true"></a></li>
    </ul>
</div>


var x = $('.bb-sort-list .bb-has-menu > li');
$.ajax({
    url: "do.php",
    context: x,
    type: "post",
    dataType: 'json',
    data: {
        action: "something"
    },
    success: function (result) {
        //console.log(result.ajx);
        $(this).css('background-color','red');
    },
    error: function () {
        console.log("There was some ajax error");
    }
});

Answer 1

你的问题是通过这样做：

.bb-sort-list .bb-has-menu > li

您实际上选择了所有

li

元素。所以如果你想选择一个

$(document).ready(function(){
  $(".bb-sort-list .bb-has-menu > li:eq(2)").css('background-color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="bb-sort-list">
  <ul class="bb-has-menu">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
  </ul>
</div>

您可以使用的特定元素

eq

这是一个选择第三个

li

元素的工作示例：