如何使用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>

. others =‘others 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

this关键字在$.post回调函数的上下文中不引用已单击的元素，缓存对象：

$('.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);
       });
});