$（this）.nextAll（“＃…”）。eq（0）.text（“ ***”）不起作用

Question

I have problem with $(this).nextAll("#status").eq(0).text("Deleted") . I want to in the tag <span> put a text: "Deleted", but but does not insert it... See the my code:

admin.php PHP:

$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>";
            echo "<span id='status'></span>";
            echo "<button class='delete' data-id='".$row['id']."'>Delete</button><hr>";
            echo "</div>";
        }

admin.js JS:

$(".delete").on("click", function() {
var id = $(this).data("id");
$(this).nextAll("#status").eq(0).text("Deleted"); //This is not work!
$.post("adminServer.php", { id: id }, function(data) {
    data = JSON.parse(data);
    alert(data);
});

});

I do not know why it does not work... Thanks!

Answer 1

Firstly part of your problem is that id attributes must be unique within the DOM. As such, only the first one will be recognised. You need to change the HTML generated to use a class on the status element instead:

$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>';
  echo '<span class="status"></span>'; // change the id to class here
  echo '<button class="delete" data-id="'.$row['id'].'">Delete</button><hr>';
  echo '</div>';
}

Secondly your DOM traversal logic isn't quite right. nextAll() goes through successive siblings, yet the status you're looking for is a preceding sibling. You can either use prev() or get the closest() parent, then find() within that. The latter is far more robust should you ever change the order of HTML elements. Also note that eq(0) is redundant as there's only one status generated per .image container.

$(".delete").on("click", function() {
  var id = $(this).data("id");
  $(this).closest('div.image').find('.status').text("Deleted");

  $.post("adminServer.php", { id: id }, function(data) {
    data = JSON.parse(data);
    console.log(data); // don't use alert() for debugging.
  });
});

Answer 2

Check below code with sample data. Hope it helps.

$(this).siblings(".status").eq(0).text("Deleted");

It gets nearby sibling with id status and update with status "Deleted"

 $(".delete").on("click", function() { var id = $(this).data("id"); $(this).siblings(".status").eq(0).text("Deleted"); /* $.post("adminServer.php", { id: id }, function(data) { data = JSON.parse(data); console.log(data); // don't use alert() for debugging. }); */ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='image' data-id='1'> <br> <span><strong>Image title</strong>: Test1</span><br> <span><strong>User of image</strong>: Test1</span><br> <span><strong>Image file name</strong>: Test1</span><br> <span class='status'></span> <button class='delete' data-id='1'>Delete</button><hr> </div> <div class='image' data-id='2'> <br> <span><strong>Image title</strong>: Test2</span><br> <span><strong>User of image</strong>: Test2</span><br> <span><strong>Image file name</strong>: Test2</span><br> <span class='status'></span> <button class='delete' data-id='2'>Delete</button><hr> </div> <div class='image' data-id='3'> <br> <span><strong>Image title</strong>: Test3</span><br> <span><strong>User of image</strong>: Test3</span><br> <span><strong>Image file name</strong>: Test3</span><br> <span class='status'></span> <button class='delete' data-id='3'>Delete</button><hr> </div>