jQuery的插入顺序为.before()与.after()

我正在尝试将使用jQuery创建的元素加载到表中。问题是，这个动态创建的元素需要插入到另一个元素（<th>）之后，以便表格保留一个漂亮的设计。使用 .after（）时，我的元素入到表中，表设计看起来不错，但我使用的数据的显示顺序与使用 .before（）插入的顺序相反。为什么我看到 .before（）/.after（）的相反行为？

编辑：.before（）为我提供了利率的正确插入顺序，但它在之前插入了元素，因此表列/行不对齐。After（）给了我相反的利率插入，但元素是在那之后添加的，所以表格保留了它的行/列。

这是我的代码，因为我的解释可能不是很清楚：

<form id="form">        
    <label for="interestInput" id="interestRateLabel">Enter interest rate</label>
    <input id="interestInput" name="interestRate" type="text">
    <a href="#" id="addInput">Add another interest rate</a><br /><br />
    <label for="loanAmtInput" id="loanAmtLabel">Enter loan amount</label>
    <input id="loanAmtInput" name="loanAmt" type="text">
    <button onclick="doCalculation(); return false;">Calculate!</button>
</form>
<div id="standard">
    <h1>Standard Repayment</h1>
    <table width="600px;" border="1" cellspacing="0" cellpadding="0">
         <th scope="col">&nbsp;</th>
            <tr id="totalMonths">
               <th scope="row">Total months</th>
            </tr>
            <tr id="paymentPerMonth">
               <th scope="row">Payment/mo</th>
            </tr>
            <tr id="totalPayment">
               <th scope="row">Total payment</th>
            </tr>
    </table>
</div>  
<div id="extended">
    <h1>Extended Repayment</h1>
    <table width="600px;" border="1" cellspacing="0" cellpadding="0">
         <th scope="col">&nbsp;</th>
            <tr id="totalMonths">
               <th scope="row">Total months</th>
            </tr>
            <tr id="paymentPerMonth">
               <th scope="row">Payment/mo</th>
            </tr>
            <tr id="totalPayment">
               <th scope="row">Total payment</th>
            </tr>
    </table>
</div>
<div id="graduated">
    <h1>Graduated Repayment</h1>
    <table width="600px;" border="1" cellspacing="0" cellpadding="0">
         <th scope="col">&nbsp;</th>
            <tr id="totalMonths">
               <th scope="row">Total months</th>
            </tr>
            <tr id="paymentPerMonth">
               <th scope="row">Payment/mo</th>
            </tr>
            <tr id="totalPayment">
               <th scope="row">Total payment</th>
            </tr>
    </table>
</div>

而且，这是相关的JS：

var doCalculation = function() {
$("div#standard table tbody th.rates, div#standard table tbody tr#totalMonths td, div#standard table tbody tr#paymentPerMonth td").remove();
var loanAmount = document.getElementById("loanAmtInput");
$("input[name=interestRate]").each(function(i){
    var num = parseInt( $(this).val(), 10 );
    var totalMonths = num * 3;
    var paymentPerMonth = num + (1/2);
    var totalPaymet = num * 120;
    console.log(i + "=" + num);
     $("div#standard table tbody th[scope=col]").before("<th class=rates>" + num + "% interest rate</th>");
     $("div#standard table tbody tr#totalMonths").append("<td>" + totalMonths + "</td>");
     $("div#standard table tbody tr#paymentPerMonth").append("<td>" + paymentPerMonth + "</td>");
});
};

它以相反的顺序进入，因为 JQuery 依次执行每个元素 - 所以在一种情况下，它在每个元素上运行before()，而在另一种情况下，它运行after()。获得你真正想要的东西的方法是从<th>开始，抓住next()，然后before()上运行。如果在 <th> 之后没有（或可能没有）任何元素，则创建一个虚拟元素，将其插入after() <th>，插入要插入before()虚拟元素的元素，然后删除虚拟元素。

如果我明白你的困惑在哪里，那是因为 .before（）和 .after（）彼此相反。

来自 jQuery API 文档：

.before（） - 在每个内容之前插入由参数指定的内容元素，以匹配的元素集。

.after（） - 在每个之后插入由参数指定的内容元素，以匹配的元素集。

阅读更多内容，请访问 http://api.jquery.com/

相关内容

最新更新

热门标签：