Question

我正在尝试将使用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>");
});
};

Answer 1

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

Answer 2

如果我理解你的困惑在哪里，那是因为.before（）和.after（）相互对立。

来自jQuery API docs：

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

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

在http://api.jquery.com/

了解详情

jQuery的.before（）与.after（）的插入顺序

2 个答案: