如何在for循环中显示特定的子节点

Question

在我当前的 html 代码中，我有一个 table 包含以下顺序：

库存编号 |产品 |正常价格 |售价

我面临的问题是，当我单击行中的值并将它们附加到另一个 table 或购物车时，我的 for 循环附加了整行。我正在寻找的是仅附加产品、销售价格，然后是我计算的 "amount saved" 价格。如何改为附加索引 eq(1) [Product] 和 eq(3) [Sale Price]？据我了解，我应该使用另一种 .find 方法，但不确定如何准确地执行此操作。（仍在获取整个 .find 和子节点）

代码片段：https://jsfiddle.net/ko828bcs/

Ps：我有 jquery 而不是 javascript 所以它在 jsfiddle 中没有运行（我只是想让你能够看到格式）

我完成所有工作的代码是：

//add the selected item in table
var variable = "<tr class='s-list' id='s-"+id +"'>";
for (var i=0; i<child_nodes.length; i++){
        // add a table cell for each node using its content
        variable += "<td>" +child_nodes.eq(i).text() + "</td>";
} // end for
    variable += "</tr>";
    // add msg to the selected courses list
    $('#selected-list').append(variable);

但是正如你所看到的，我使用 eq(i) 来给出整行。

文件：

<script>

//makes gray in table
$(document).ready(function() {
$(".list:odd").css('background-color', '#eee');
});

$(function() {

    $('#selected-list').on('click', 's-list',function(){

        alert($(this).children().eq(0).text());
        //delete this element
        $(this).remove();
    });

    $('.list').on('click', function(){

        //rest background color
        $('.list').css('background-color', '#fff');

        //change background color
        $(this).css('background-color', '#eee');        

        //read its id attribute
        var id = $(this).attr('id');
        //alert(id);

        //Check if it has already been added
        if ($('#selected-list').find('#s-'+id).length > 0){

            alert("The product is already selected. Please choose a different one!");
        }
        else {

        // find  child nodes
        var child_nodes = $(this).children();
        // read current total
        var current_total = parseInt($('#total').val());
        //read selected sale price
        var selected_sale= parseInt(child_nodes.eq(3).text());
        //read initial price
        var selected_price = parseInt(child_nodes.eq(2).text());            
        //saving amount for each selected
        var savings = selected_price - selected_sale;


        //add the selected item in table and update total
        var variable = "<tr class='s-list' id='s-"+id +"'>";
        for (var i=0; i<child_nodes.length; i++){
            // add a table cell for each node using its content
            variable += "<td>" +child_nodes.eq(i).text() + "</td>";
        } // end for
        variable += "</tr>";
        // add msg to the selected courses list
        $('#selected-list').append(variable);


        //update total cost
        // read the current total
        var total = parseInt($('#total').val());
        // add the selected item cost to the total
        total += parseInt(child_nodes.eq(3).text());

        // update the total cost
        $('#total').val(total); 

        // Reset background color of all the rows
        $('.courselist').css('background-color', '#fff');

        // Change background color of the selected row
        $(this).css('background-color', '#eee');
        }


    });
});


</script>

</head>
<body>
<h2>Sam's Store</h2>
<div class="content">
<div class='title'>Deals of the  Week</div>
<div class='labels'>
<div class='cell1' id='sid1'>Stock ID</div>
<div class='cell2' id='pid1'>Product</div>
<div class='cell3' id='rpid1'>Regular Price</div>
<div class='cell4' id='spid1'>Sale Price</div>
</div>

<div class='list' id='c1'>
<div class='cell1' id='sid2'>SH32AQ60</div>
<div class='cell2' id='pid2'>Sharp AQUAS-60in  HDTV</div>
<div class='cell3' id='rpid2'>799.99</div>
<div class='cell4' id='spid2'>759.99</div>
</div>
<div class='list' id='c28'>
<div class='cell1' id='sid3'>PN455</div>
<div class='cell2' id='pid13'>Panasonic 55in LED HDTV</div>
<div class='cell3' id='rpid3'>999.99</div>
<div class='cell4' id='spid3'>679.99</div>
</div>
<div class='list' id='c60'>
<div class='cell1' id='sid4'>VZ49M</div>
<div class='cell2' id='pid4'>VIZIO M series 49in LED HDTV</div>
<div class='cell3' id='rpid4'>719.99</div>
<div class='cell4' id='spid4'>579.99</div>
</div>
<div class='list' id='c62'>
<div class='cell1' id='sid5'>IN200SR</div>
<div class='cell2' id='pid5'>Insignia 200W Stereo Receiver</div>
<div class='cell3' id='rpid5'>24.99</div>
<div class='cell4' id='spid5'>19.99</div>
</div>

<div class='list' id='c6'>
<div class='cell1' id='sid6'>PN1000HTS</div>
<div class='cell2' id='pid6'>Panasonic 1000W Smart Blu-ray Home Theater System</div>
<div class='cell3' id='rpid6'>349.99</div>
<div class='cell4' id='spid6'>299.99</div>
</div>
<div class='list' id='c7'>
<div class='cell1' id='sid7'>HP305DJ</div>
<div class='cell2' id='pid7'>HP Deskjet 3056A</div>
<div class='cell3' id='rpid7'>49.90</div>
<div class='cell4' id='spid7'>34.90</div>
</div>
<div class='list' id='c8'>
  <div class='cell1' id='sid8'>RF386BMR</div>
  <div class='cell2' id='pid8'>Rocketfish Bluetooth Music Receiver</div>
  <div class='cell3' id='rpid8'>49.90</div>
  <div class='cell4' id='spid8'>34.90</div>
</div>
<div class='list' id='c9'>
    <div class='cell1' id='sid9'>SM350SB</div>
    <div class='cell2' id='pid9'>Sling Media Slingbox 350</div>
    <div class='cell3' id='rpid9'>179.90</div>
    <div class='cell4' id='spid9'>115.90</div>
</div>


</div>

<div id="shop">
 <div class="shoppinglist">
<div class='list-title'>You have <span id="items">0</span>  items in your Shopping Cart</div>
  <div >

  <div class='cell2'>Product</div>
  <div class='cell3'>Sale Price</div>
  <div class='cell4'>You Save</div>

  <div class='table selected-list' id='selected-list'></div>
  </div>
  </div>
 </div>
<div class="total">Total Amount: $<span id="total"></span></div>

</body>
</html>

Answer 1

您可以在循环中使用 if 条件

 for (var i=0; i<child_nodes.length; i++){
        if(i == 1 || i == 3)
        {
            variable += "<td>" +child_nodes.eq(i).text() + "</td>";
        }
    } // end for
    variable += "</tr>";

或者只添加您想要的两个节点

    var variable = "<tr class='s-list' id='s-"+id +"'>";
    variable += "<td>" +child_nodes.eq(1).text() + "</td>";
    variable += "<td>" +child_nodes.eq(3).text() + "</td>";
    variable += "</tr>";

如何在for循环中显示特定的子节点

How to Display Specific Child Nodes in for loop

jquery

html

child-nodes