$(this).nextAll("#status").eq(0).text("Deleted")无法生效的问题求助

首先，你的代码有两个关键问题导致设置文本失败：

1. 重复使用唯一ID属性 #

在PHP循环中，你给每个<span>都设置了id='status'，但HTML规范里ID必须是页面唯一的。浏览器在查找ID时只会返回第一个匹配的元素，这会导致后续的status元素无法被正确选中。

2. DOM遍历方向错误 #

看你的HTML结构，每个.delete按钮是在<span id='status'>的后面：

<div class='image'>
  <!-- 其他span -->
  <span id='status'></span>
  <button class='delete'>Delete</button>
</div>

而你用的$(this).nextAll("#status")是查找按钮之后的同级元素，但status明明在按钮前面，自然找不到任何元素。

修正步骤： #

第一步：修改PHP代码，将ID改为Class

把重复的id='status'改成class='status'，保证选择器的正确性：

$sql = "SELECT * FROM `upload_img`"; 
$result = mysqli_query($db, $sql); 
while ($row = mysqli_fetch_assoc($result)) { 
    echo "<div class='image' data-id='".$row['id']."'><br>"; 
    echo "<span><strong>Image title</strong>: ".$row['image_title']."</span><br>"; 
    echo "<span><strong>User of image</strong>: ".$row['user_name']."</span><br>"; 
    echo "<span><strong>Image file name</strong>: ".$row['image']."</span><br>"; 
    // 把id改成class
    echo "<span class='status'></span>"; 
    echo "<button class='delete' data-id='".$row['id']."'>Delete</button><hr>"; 
    echo "</div>"; 
} 

第二步：修正JS的DOM查找逻辑

因为按钮和status在同一个.image容器里，我们可以先找到父容器，再选中里面的.status，或者直接用prev()（因为status是按钮的前一个同级元素）：

方法一（更健壮，适合结构可能变化的情况）：

$(".delete").on("click", function() { 
    var id = $(this).data("id"); 
    // 先找到父级的.image容器，再找里面的.status
    $(this).closest(".image").find(".status").text("Deleted"); 
    $.post("adminServer.php", { id: id }, function(data) { 
        data = JSON.parse(data); 
        alert(data); 
    }); 
});

方法二（结构固定时可用）：

$(".delete").on("click", function() { 
    var id = $(this).data("id"); 
    // 直接找前一个同级元素（status）
    $(this).prev(".status").text("Deleted"); 
    $.post("adminServer.php", { id: id }, function(data) { 
        data = JSON.parse(data); 
        alert(data); 
    }); 
});

这样修改后，点击删除按钮就能正确把对应容器里的status文本设置为"Deleted"了。

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