jquery - 如何使用 jquery 的每个方法发布每个图像的值？

Question

我有 html 代码:

<div>
  <span class="image" id="img-1"></span>
  <span id="src-1">img-src-1</span>
  <span id="cmd-1">img-cmd-1</span>
  <span id="h1-1">img-h1-1</span>
  <span id="h2-1">img-h2-1>
</div>

<div>
  <span class="image" id="img-2"></span>
  <span id="src-2">img-src-2</span>
  <span id="cmd-2">img-cmd-2</span>
  <span id="h1-2">img-h1-2</span>
  <span id="h2-2">img-h2-2>
</div>

以及其他递增的 div，如 img-3、img-4、img-5 ..... 以及相关值

这是我的 JavaScript:

$('.image').each(function() {
  $.post("../../includes/processes/show-images.php", {
    width : $(this).parent().width(),
    img_src : $(this).next().text(),
    cmd : $(this).next().next().text(),
    h1 : $(this).next().next().next().text(),
    h2 : $(this).next().next().next().next().text()
  },
  function(response){
    $(this).parent().html(response);
  });
});
return false;

我想为每个“.image”元素发布其值并在“.image”.parent() 中返回响应，但我的代码不起作用。 :-(

有人可以帮我吗？

Answer 1

$.post 回调函数上下文中的

this 关键字不引用单击的元素，缓存对象:

$('.image').each(function() {
   var $this = $(this);
   $.post("../../includes/processes/show-images.php", {
    // ...
   }, function(response){
       $this.parent().html(response);
   });
});

您还可以使用 .siblings() 和 .eq() 方法，而不是多次调用 .next() 方法:

$('.image').each(function() {
      var $this = $(this),
          $siblings = $this.siblings();
      $.post("../../includes/processes/show-images.php", {
          width   :  $this.parent().width(),
          img_src :  $siblings.eq(0).text(),
          cmd     :  $siblings.eq(1).text(),
          // ...
       }, function(response){
           $this.parent().html(response);
       });
});