Jquery insertAfter (), кажется, не работает для меня

Question

Я создал родительский div и вставил div после родительского div, используя метод jquery insertAfter() .... Что происходит, моя первая запись идет вниз, а следующая запись вставляется над ним ....

Вот моя функция ...

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');
    }
}

И мой результат,

альтернативный текст http://img265.imageshack.us/img265/7646/divresult.jpg

Палани должна быть рядом с моим родительским дивом, но он внизу ... Потому что insertAfter() вставляет каждую запись рядом с #ResultsDiv ... Любое предложение о том, как вставить после сгенерированного div ...

EDIT: как добавить цвет строки к этим элементам 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");
}

Но не сработало ..

Answer 1

Вы добавляете элементы после родительского элемента:

<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.

Обновление:

Вы добавляете несколько элементов с одинаковым идентификатором, что недопустимо.Просто используйте класс для нацеливания на элементы:

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

Answer 2

Обратный цикл:

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

Примечание: не использовать eval.Я бы порекомендовал вам JSON.parse или, если этот JSON исходит от вызова ajax, jQuery должен автоматически проанализировать его для объекта.

---

ОБНОВЛЕНИЕ:

Длядобавьте цвет строки к этим элементам, вы можете попробовать это за пределами цикла:

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