[英]Grouping sub arrays by parent array element with JavaScript
我有一個從遠程源加載的購物車頁面，我想更改頁面的布局。 我已經獲取了購物車項目的所有 html(tables)，我想遍歷這些項目並按項目名稱對它們進行分組。 頁面上的html是這樣的：
<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 遍歷“輸入代碼表行”並按“購物車項目”拆分項目。 然后我將字符串拆分為標題、顏色、大小和城鎮：
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 = [];
}
這給了我類似這樣的元素的數組：
array{ name:"South Georgia Pocket Tee"
value:[colour: "Navy",size: "Small", town: undefined]}
我想要做的是將所有父元素與子元素組合在一起，這樣我就可以循環它們並用新調整的 html 替換當前的購物車 html。 所以購物車看起來像這樣：
<div><ul>**Town Specific Short Sleeve Tee**
<li>Crimson with Navy /Large : 1</li>
<li>Crimson with Navy /Large(town-London) : 1</li>
<li>Navy with Red /Medium :1</li>
<li>Navy with Red /Medium(town-Manchester) : 1</li>
</ul></div>
等。
我將如何對數組進行分組，以便我可以使用 JavaScript 迭代和替換 html？
我通過將原始的每個循環更改為這個來解決這個問題
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);
}
});
然后輸出有分組數組，有點凌亂但可以完成工作。
將父數組元素和子數組推入javascript中的新數組
[英]Push parent arrays element and chidren array into new array in javascript
如何在javascript中的子數組數組和子數組數組之間進行過濾？
[英]How to filtering between array of sub arrays and array of sub arrays in javascript?
使用元素的值及其在JavaScript中重復的次數創建一個子數組數組
[英]Create an array of sub-arrays with the value of an element and the number of times it has repeated in JavaScript
通過基於Javascript中第一個數組的元素進行分組來合並兩個數組
[英]Merge two arrays by grouping based on elements of 1st array in Javascript
將基於 arrays 的子數組索引的數組合並為鍵（NodeJS/Javascript）
[英]Merge array of arrays based sub array index as keys (NodeJS/Javascript)
通過使用在每個子數組的第一個元素中找到的子字符串作為鍵來組合子數組
[英]Combine sub-arrays by using as a key a sub-string found in the first element of each sub-array
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.