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

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 id="e4d"></div> 
<div id="e5d"></div> 

Я пришел с:

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

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

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

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

Answer 1

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

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

.eq (п) возвращает элемент в позиции N в Jquery resulset.

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

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

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

<?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; 

?> 

Answer 4

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

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

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

Затем цикл через дивы внутри описания DIV и установить их идентификаторы, как это:

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