使用javascript

时间：2017-10-06 15:43:15

标签： javascript jquery html arrays

我有一个从远程源加载的购物车页面，我想更改页面的布局。我已经抓住了购物车项目的所有html（表格），我想迭代这些项目并按项目名称对它们进行分组。页面上的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迭代`输入代码表行并通过＆＃39; cart-item＆＃39;拆分项目。然后我将字符串拆分为标题，颜色，大小和城镇

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。所以购物车看起来像这样 -

`

    城镇特定短袖T恤    
  • 深红色/深红色：1
    •    
  • 深海/大型（伦敦镇）的深红色：1
    •    
  • 红色/中等海军：1
    •    
  • 海军红/中（镇 - 曼彻斯特）：1

等等

我如何对数组进行分组，以便我可以使用JavaScript迭代并替换html？ 任何帮助都非常感激，我整个下午都在用这个

敲打我的头

1 个答案:

答案 0 :(得分：0)

我通过将原始的每个循环更改为此

来对此进行排序 
        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);
    }
});

然后输出有分组的数组，位杂乱，但是完成了工作。

相关问题
最新问题