Jquery insertAfter() 似乎对我不起作用答案

【问题标题】：Jquery insertAfter() doesn't seem to work for meJquery insertAfter() 似乎对我不起作用
【发布时间】：2010-03-23 08:56:56
【问题描述】：

我创建了一个父 div 并使用 jquery insertAfter() 方法在父 div 之后插入了 div.... 发生的情况是我的第一条记录进入底部，下一条记录插入到它上面....

这是我的功能...

function Iteratejsondata(HfJsonValue) {
    var jsonObj = eval('(' + HfJsonValue + ')');
    for (var i = 0, len = jsonObj.Table.length; i < len; ++i) {
        var employee = jsonObj.Table[i];
        $('<div  class="resultsdiv"><br /><span id="EmployeeName" style="font-size:125%;font-weight:bolder;">' + employee.Emp_Name + '</span><span style="font-size:100%;font-weight:bolder;padding-left:100px;">Category&nbsp;:</span>&nbsp;<span>' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" style="font-size:100%;font-weight:bolder;">Salary Basis&nbsp;:</span>&nbsp;<span>' + employee.SalaryBasis + '</span><span style="font-size:100%;font-weight:bolder;padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span>' + employee.FixedSalary + '</span><span style="font-size:100%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span>' + employee.Address + '</span></div>').insertAfter('#ResultsDiv');
    }
}

我的结果是，

alt text http://img265.imageshack.us/img265/7646/divresult.jpg

Palani 必须在我的父 div 旁边，但它在底部...因为 insertAfter() 在#ResultsDiv 旁边插入每条记录...任何建议如何在新生成的 div 之后插入...

编辑： 如何为我使用的这些 div 添加行颜色

 function Iteratejsondata(HfJsonValue) {
 var jsonObj = JSON.parse(HfJsonValue);
 for (var i = jsonObj.Table.length - 1; i >= 0; i--) {
    var employee = jsonObj.Table[i];
    $('<div id="resDiv" class="resultsdiv"><br /><span id="EmployeeName" style="font-size:125%;font-weight:bolder;">' + employee.Emp_Name + '</span><span style="font-size:100%;font-weight:bolder;padding-left:100px;">Category&nbsp;:</span>&nbsp;<span>' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" style="font-size:100%;font-weight:bolder;">Salary Basis&nbsp;:</span>&nbsp;<span>' + employee.SalaryBasis + '</span><span style="font-size:100%;font-weight:bolder;padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span>' + employee.FixedSalary + '</span><span style="font-size:100%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span>' + employee.Address + '</span></div>').insertAfter('#ResultsDiv');
}
$("#resDiv.resultsdiv:odd").css("background-color", "#F4F4F8");
$("#resDiv.resultsdiv:even").css("background-color", "#EFF1F1");
}

但是没有用..

【问题讨论】：

标签： jquery html insertafter

【解决方案1】：

反转循环：

for (var i = jsonObj.Table.length - 1; i >= 0; i--)

备注：不要使用eval。我会推荐你JSON.parse，或者如果这个 JSON 来自 ajax 调用，jQuery 应该自动将它解析为对象。

更新：

要为这些 div 添加行颜色，您可以在 outside 循环中尝试：

$(".resultsdiv:odd").css("background-color", "#F4F4F8");
$(".resultsdiv:even").css("background-color", "#EFF1F1");

【讨论】：

var jsonObj = JSON.parse(HfJsonValue);
当然：$('.resultsdiv').hover(function() { alert('hovering'); });
@Darin 在函数内部也发现了$(this).css('background-color', '#F00');...

【解决方案2】：

您正在添加元素在父元素之后：

<div id="ResultsDiv">
</div>
<div class="resultsdiv">...4...</div>
<div class="resultsdiv">...3...</div>
<div class="resultsdiv">...2...</div>
<div class="resultsdiv">...1...</div>

但您可能想在父元素内添加元素：

<div id="ResultsDiv">
  <div class="resultsdiv">...1...</div>
  <div class="resultsdiv">...2...</div>
  <div class="resultsdiv">...3...</div>
  <div class="resultsdiv">...4...</div>
</div>

使用appendTo 方法代替insertAfter 方法。

更新：

您正在添加多个具有相同 id 的元素，这是不合法的。只需使用该类来定位元素：

$(".resultsdiv:odd").css("background-color", "#F4F4F8");
$(".resultsdiv:even").css("background-color", "#EFF1F1");

【讨论】：

@Guffa 看看这个问题你就知道我在做什么stackoverflow.com/questions/2498179/…
@Pandiya：那么你的“父”元素实际上只是第一个兄弟元素。而是将元素附加到第一个元素的父元素。
这就是我使用的insertAfter() 方法。它是正确的还是我在这里遗漏了什么？
@Pandiya：如果您使用insertAfter 方法，您只能在“父”元素旁边插入元素。如果添加真正的父元素，则可以在列表末尾添加元素。