Question

我遇到了问题，我尝试使用jQuery并使用PHP显示列表，使用类.search_box选择CLOSEST到.results元素。

$(".results").show().append(html)

这很糟糕，因为来自PHP的列表显示了所有元素附近。我很少.calc_input_wrapper添加动态。

$(this).closest(".results").show().append(html)

这不起作用。

<div class="calc_input_wrapper clearfix">
  <ul class="calc_input_list clearfix">
    <li class="product_number">1</li>
    <li class="product_input">
      <form method="post" action="do_search.php">
        <input  autocomplete="off" placeholder="Продукт" type="text" name="search" class='search_box'/>
      </form>
      <div class="delete_product_row"></div>
      <ul class="results" class="update">
      </ul>
    </li>
    <li class="product_weight">
      <form action="">
        <input autocomplete="off" type="text" placeholder="0">
      </form>
    </li>
    <li class="product_protein">-</li>
    <li class="product_fat">-</li>
    <li class="product_carboh">-</li>
    <li class="product_calor">-</li>
  </ul>
</div>

$(document).on('keyup', '.search_box', function() {
  // получаем то, что написал пользователь
  var searchString    = $(this).val();
  // формируем строку запроса
  var data = 'search=' + searchString;
  // если searchString не пустая
  if(searchString.length > 1) {
    // делаем ajax запрос
    $.ajax({
      type: "POST",
      url: "do_search.php",
      data: data,
      beforeSend: function(html) {
        $(".results").html('');
        $("#searchresults").show();
        $(".word").html(searchString);
      },
      success: function(html){
        //$(".results").show().append(html);                           
        console.log('omg');
      }
    });
  } else {
    $(".results").html('');
  }
  return false;
});

Answer 1

$(this)在ajax方法'回调中不会相同。在调用$.ajax方法的代码之前，this表示用户输入某个值的输入框。但是在ajax方法的成功中，回调this代表了xhr对象。所以我建议你将$(this)保留在ajax调用之外的变量中并使用它。

此外，您应该使用closest()方法使用css类“product_input”访问外部li元素，并使用find()方法获取结果div。

var _this = $(this);
$.ajax({
          //Your existing code
          success: function(html){
                _this.closest(".product_input").find(".results").show().html(html);       

          }
      });

另一个选择是在进行ajax调用时使用context属性。这将使您的this保持原样。因此，您只需使用$(this)而不是局部变量。

$.ajax({
      //your existing code
       context: this,
       success: function (html) {
            $(this).closest(".product_input").find(".results").show().html(html);
      }
     });

如何选择一个班级

1 个答案: