divの代わりにdivの代わりにJSのプリペンドを使用する

Question

私はオプションの値を見て、foreachループ内のdivの隠し入力の値と一致させる選択ボックスを持つ既存のコードをいくつか持っています。私はそれが私が欲しいと思っている方法で働いています（ここでは、非表示入力の値が '0'の場合、そのdivを隠すことになります）。再び、show/hideは完全に機能します。

しかし、値が '1'の場合、影響を受けるdivの先頭に追加するか、最初に表示するようにする必要があります。私はprependやappendを使用したことは一度もありません。何らかの理由でこれを動作させることはできません。私は追加で値 '0'を使用しようとしましたが、すべてを隠しました。私は前置詞が良いと思う。ここで

は、前の作業「隠すのJavaScriptです：

<script type="text/javascript"> 
$(function(){ 

$('#filterText').on('change', function() { 
    var currentVal = $(this).val(); 
    console.log(currentVal) 

    $(".group-container").show(); 
    if (currentVal == 'popularity') { 
    $('.group-container input[name="topseller"]').each(function (index, value){ 
    if($(this).val() == "0"){ 
     $(this).parent('.group-container').hide(); 
     //console.log(currentVal) 
    } 
    }); 
    } else if (currentVal == 'recently_ordered') { 
    $('.group-container input[name="reorder"]').each(function (index, value){ 

     if($(this).val() == "0"){ 
       $(this).parent('.group-container').hide(); 
       // console.log(currentVal) 
      } 
     }); 
    } 
}); 
}); 

</script> 

ここでHTML

<div> 
    <span style="color:#fff;"><strong>Sort by:</strong></span> 
     <select id="filterText" class="uk-text-muted" style="margin-top:10px; width:33%; height:30px; font-size: 16px;" > 
     <option id="allitems" class="uk-text-muted" style="font-size: 16px;" selected data-default value="" selected data-default>All Items</option> 
             file 
     <option id="recent" class="uk-text-muted" style="font-size: 16px;" value="recently_ordered">Recently Ordered </option> 
     </select> 
    </div> 

@foreach ($orderFormData->pgroups as $pgroup) 
<div class="group-container"> 
     <!-- <input type='hidden' name='search' value='{{ x.search }}' > --> 
     <input type="hidden" name="topseller" value="{{$pgroup->topseller}}" /> 
     <input type="hidden" name="reorder" value="{{$pgroup->reorder}}"/> 

    //rest of the content here 

そして、私がしようとしてる新しいJSだが、何もアクションを持っていない：

<script type="text/javascript"> 
$(function(){ 

$('#filterText').on('change', function() { 
    var currentVal = $(this).val(); 
    console.log(currentVal) 

    $(".group-container").show(); 

    if (currentVal == 'recently_ordered') { 
    $('.group-container input[name="reorder"]').each(function (index, value) 
{ 

     if($(this).val() == "1"){ 
       $(this).prepend('.group-container')    
      } 
     }); 
    } 
}); 
}); 

</script> 

Answer 1

$（this）.prepend（ '。グループコンテナ'）

このコードは、選択した要素内に ".group-container"という文字列を追加するだけです。あなたが代わりにやったのであれば、あなたは

<input ....>.group-container</input> 

になるだろう、この：

$(this).prepend('<div class="group-container">); 

あなたはそれがあなたの既存の要素の先頭に付加なるだろう：私はあなたが何をしたいと思います

<input....><div class="group-container"></div></input> 

"ラップ"：

$(this).wrap('<div class="group-container">'); 

<div class="group-container"><input.../></div> 

http://api.jquery.com/wrap/