循环遍历一组ID并复制它们

时间:2009-11-13 15:40:07

标签: javascript jquery

我有一个无序的列表,其中包含如下所示的ID:

<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复制列表项的ID,并将它们分配给末尾带有字母的div,以便它们变为:

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

我想出了:

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

但是你可以告诉它,它不会循环而是取第一个id并将其分配给所有div,从而产生:

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

如果您能够解释逻辑中的缺陷,甚至可以链接到我可以阅读的内容以提高我的技能,我将非常感激。我在看http://docs.jquery.com/Attributes/attr#keyfn,但没有意义。谢谢你的阅读!

4 个答案:

答案 0 :(得分:2)

来自jquery的每个函数也将索引参数传递给回调函数。 前提是描述中的div数量与具有类event_day的div相同:

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

.eq(n)返回jquery结果集中位置N的元素。

您的查询可能会更有效率,因为现在您遍历描述中每个div的dom。更好(imho)将是:

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

答案 1 :(得分:1)

收集事件日的所有ID可能更容易,然后根据需要使用您想要的ID动态创建div。

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

答案 2 :(得分:0)

您可以在渲染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;

?>

答案 3 :(得分:0)

你的逻辑中的缺陷是你唯一匹配的第一个元素,即e4。

因此,只需创建一个数组并添加与类 event_day 匹配的ID:

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

然后遍历 description div中的div并设置它们的id:

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