javascriptを使用した親配列要素によるサブ配列のグループ化

-1

リモートソースから読み込まれたカートページがあり、ページのレイアウトを変更したいと思います。私はカートアイテムのすべてのhtml（テーブル）をつかんで、アイテムを繰り返し、アイテム名でグループ化したいと思います。ページのHTMLは、このようなものです： -javascriptを使用した親配列要素によるサブ配列のグループ化

<table> 
<tbody> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      South Georgia Pocket Tee - Mint/Medium 
     </div> 
    </td> 
    <td class="cart-price"> 
     $15.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[29209762256]" id="updates_29209762256" value="2" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(29209762256); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $30.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      South Georgia Pocket Tee - Navy/Medium 
     </div> 
    </td> 
    <td class="cart-price"> 
     $15.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[29209761936]" id="updates_29209761936" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(29209761936); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $15.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      South Georgia Pocket Tee - Navy/Small 
     </div> 
    </td> 
    <td class="cart-price"> 
     $15.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[29209761872]" id="updates_29209761872" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(29209761872); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $15.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - Crimson with Navy/Large 
      <br /> 
      Town/City: 
      ohio 
      <br> 
     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[35347518736]" id="updates_35347518736" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(35347518736); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - Crimson with Navy/Large 
      <br /> 
     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[35347518736]" id="updates_35347518736" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(35347518736); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - Crimson with Navy/Small 
      <br /> 
      Town/City: 
      ohio 
      <br> 
     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[35345344848]" id="updates_35345344848" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(35345344848); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 

    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - Crimson with Navy/Small 
      <br /> 
     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[35345344848]" id="updates_35345344848" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(35345344848); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - Navy with Red/Medium 
      <br /> 
      Town/City: 
      ohio 
      <br> 
     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[35347517136]" id="updates_35347517136" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(35347517136); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - Navy with Red/Medium 
      <br /> 
     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[35347517136]" id="updates_35347517136" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(35347517136); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - Red with Ice Blue/XLarge 
      <br /> 
     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[35347521872]" id="updates_35347521872" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(35347521872); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - Sage With Ice Blue/XLarge 
      <br /> 
      Town/City: 
      ohio 
      <br> 
     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[41628245584]" id="updates_41628245584" value="1" onfocus="this.select();"/> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(41628245584); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - Sage With Ice Blue/XLarge 
      <br /> 

     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[41628245584]" id="updates_41628245584" value="1" onfocus="this.select();" /> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(41628245584); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 
    </td> 
</tr> 
<tr> 
    <td class="cart-item"> 
     <div class="cart-title"> 
      Town Specific Short Sleeve Tee - White with Red/Medium 
      <br /> 
     </div> 
    </td> 
    <td class="cart-price"> 
     $16.00 
    </td> 
    <td class="cart-quantity"> 
     <input type="text" class="cart-qty" size="4" name="updates[35347518416]" id="updates_35347518416" value="1" onfocus="this.select();" /> 
    </td> 
    <td class="cart-remove"> 
     <a href="#" onclick="remove_item(35347518416); return false;"><i class="icon-trash icon-2x"></i></a> 
    </td> 
    <td class="cart-total"> 
     $16.00 
    </td> 
</tr> 
</tbody>

私は `コード表の行を入力し、「カート項目」でアイテムを分割を反復処理するためにJavaScriptを使用しています。と

array{ name:"South Georgia Pocket Tee" 
    value:[colour: "Navy",size: "Small", town: undefined]}

私がやりたいことはあるグループすべての親要素：私は、これは私に次のような要素を持つ配列を与える

var full_array = new Array(); 
var item_array = new Array(); 
var variant_array = new Array(); 

$('.cart-item').each(function() { 
    var split_string = $(this).find(' .cart-title').html().split(' - '); 
    if (split_string[0] != 'remove') { 
     item_array['name'] = split_string[0]; 
     var split_variant = split_string[1].split('/'); 
     variant_array['colour'] = split_variant[0]; 
     var split_size = split_variant[1].split('<br>'); 
     variant_array['size'] = split_size[0]; 
     variant_array['town'] = split_size[1]; 
     item_array['value']=variant_array; 
     full_array.push(item_array); 
     item_array = []; 
     variant_array = [];   
    }

タイトル、色、大きさや町に文字列を分割しています私はそれらをループし、現在のカートのhtmlを新しい調整されたhtmlに置き換えることができます。ネイビー/大（町-ロンドン）で1つの

クリムゾン：1

海軍とのSOカートは大ネイビー/とthis-

タウン具体的な半袖Tシャツ

クリムゾンのようになります。赤/ミディアム：1
レッド/ミディアム（町-マンチェスター）で海軍：1

などなど

JavaScriptを使用してhtmlを繰り返し処理して置き換えるために、配列をグループ化するにはどうすればよいですか？すべてのヘルプは大歓迎、私はこの

出典

2017-10-06 Barry Watts

で壁にすべての午後を私の頭を叩いてきた私は、この

 if(split_variant[0].search('<br>')) { 
      var split_size = split_variant[1].split('<br>'); 
      variant_array['size'] = split_size[0]; 
      variant_array['town'] = split_size[1]; 
     }else{ 
      variant_array['size'] = split_variant[1]; 
     } 
     item_array['value']= new Array(); 
     item_array['value'].push(variant_array); 
     full_array.push(item_array);

に各ループを元変更することで、これを整理その後、私はこの機能を実行した

full_array.forEach(function(value) { 
    var existing = output.filter(function(v, i) { 
     return v.name == value.name; 
    }); 
    if (existing.length) { 
     var existingIndex = output.indexOf(existing[0]); 
     output[existingIndex].value = output[existingIndex].value.concat(value.value); 
    } else { 
     if (typeof value.value == 'string') 
      value.value = [value.value]; 
     output.push(value); 
    } 
});

出力がグループ化された配列を持っていたが、ちょっと混乱していたが、その仕事をしている。

出典

2017-10-09 08:36:41

javascriptを使用した親配列要素によるサブ配列のグループ化

答えて

関連する問題