クラスを選択するには

Question

私は問題があります.の要素で.search_box要素をCLOSESTに選択しようとしましたが、jQueryとPHPのリストを使用しています。

$(".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オブジェクトを表します。だから私はあなたのajax呼び出しの外の変数に$(this)を保持し、それを使用することをお勧めします。

さらにメソッドを使用して、li要素をcssクラス "product_input"で取得し、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); 
     } 
    });