Loop through a set of ids and copy them...

Question

I have an unordered list with ids like so:

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

And a div with content like so:

<div id="descriptions">

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

</div>

I want to copy the ids of the list items with the class event_day and assign them to the divs with a letter at the end so that they would become:

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

I have come up with:

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

But as you can probably tell, it does not loop and rather takes the first id and assigns it to all the divs resulting in:

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

I'd highly appreciate it if you could explain the flaw in the logic and maybe even a link to something that I could read to improve my skills. I was looking at http://docs.jquery.com/Attributes/attr#keyfn but it did not make sense. Thanks for reading!

Answer 1

It may be easier to collect all IDs of event days, then create divs dynamically with the IDs you want as needed.

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

Answer 2

Could you determine what you need before you render the HTML, and then just draw both the list and the divs accordingly?

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

the each function from jquery also passes an index parameter to the callback function. Provided that the amount of divs in descriptions is the same as the divs with class event_day:

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

.eq(n) returns the element at position N in the jquery resulset.

Your query could be a little bit more efficient though because now you traverse the dom for each div in descriptions. Better (imho) would be:

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

Answer 4

The flaw in your logic is that your only matching the first element, which is e4.

So, just create an array and add the ids that match the class *event_day*:

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

Then loop through the divs within the description div and set their ids like this:

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