Перебрать набор идентификаторов и скопировать их

Question

У меня есть неупорядоченный список с идентификаторами, такими как:

<li id="e1">01</li>
<li id="e2">02</li>
<li id="e3">03</li>
<li id="e4" class="event_day">04</li>
<li id="e5" class="event_day">05</li>

И div с таким содержимым:

<div id="descriptions">

<div></div>
<div></div>

</div>

Я хочу скопировать идентификаторы элементов списка с классом event_day и назначить их элементам div с буквой в конце, чтобы они стали:

<div id="e4d"></div>
<div id="e5d"></div>

Я придумал:

$("#descriptions>div").each(function() {
      $(this).attr("id", $(".event_day").attr("id") + "d");
});

Но, как вы, вероятно, можете сказать, он не зацикливается, а берет первый идентификатор и присваивает его всем элементам div, что приводит к:

<div id="e4d"></div>
<div id="e4d"></div>

Я был бы очень признателен, если бы вы могли объяснить ошибку в логике и, возможно, даже ссылку на что-то, что я мог бы прочитать, чтобы улучшить свои навыки. Я смотрел на http://docs.jquery.com/Attributes/attr#keyfn, но это не имело смысла. Спасибо за чтение!

Answer 1

каждая функция из jquery также передает параметр индекса в функцию обратного вызова. При условии, что количество элементов div в описании совпадает с количеством элементов div с классом event_day:

$("#descriptions>div").each(function(n) {
      $(this).attr("id", $(".event_day").eq(n).attr("id") + "d");
});

.eq (n) возвращает элемент в позиции N в результате поиска jquery.

Ваш запрос может быть немного более эффективным, потому что теперь вы пересекаете dom для каждого div в описании. Лучше (imho) будет:

var event_days = $("#listIdentifier .event_day");
$("#descriptions>div").each(function(n) {
      $(this).attr("id", event_days.eq(n).attr("id") + "d");
});

Answer 2

Может быть проще собрать все идентификаторы дней событий, а затем динамически создавать элементы с нужными идентификаторами.

$("li.event_day").each(function() {
    $("#descriptions").append(
        $("<div>").attr("id", $(this).attr("id") + "d")
    );
});

Answer 3

Недостаток вашей логики в том, что вы соответствуете только первому элементу, то есть e4.

Итак, просто создайте массив и добавьте идентификаторы, соответствующие классу event_day :

var myIds=new Array();
$("li.event_day").each(function() {
   myIds.push($(this).attr("id") + "d"); 
});

Затем переберите div в описании div и установите их идентификаторы так:

var count = 0;
$("#descriptions>div").each(function() {
      $(this).attr("id", myIds[count]);
      count = count + 1;
});

Answer 4

Не могли бы вы определить, что вам нужно, прежде чем рендерить HTML, а затем просто нарисовать и список, и div соответственно?

<?php
$event_days = array(4,5);

$list = '<ol>';
$divs = '';

for($i=1;$i<30;$i++)
{
    // built the list
    $list .= '<li id="e'.$i.'" ';
    if(in_array($i, $event_days))
    {
        $list .= 'class="event_day"';
    }
    $list .= '>Day '.$i.'</li>';

    // build the divs
    if(in_array($i, $event_day)
    {
        $divs .= '<div id="e'.$i.'d"></div>';
    }
}
$list .= '</ol>';

echo $list;
echo $divs;

?>