使用选择器或方法帮助的 JQuery 列表遍历

Question

我基本上在遍历无序列表和检索列表项时遇到了一些麻烦。

  foreach (MyTypeObject s in result)
        {

            oList.Clear();

             {


            oList.AppendFormat("<ul id='OuteroListItems'>");
            oList.AppendFormat("<li>");
            oList.AppendFormat("<ul id='oListItems'>");
            oList.AppendFormat("<li>" + s.Name + "</li>");
            oList.AppendFormat("<li>" + s.NameDesc + "</li>");
            oList.AppendFormat("<li>" + s.StartDate + "</li>");
            oList.AppendFormat("<li>" + s.EndDate + "</li>");
            oList.AppendFormat("</ul>");
            oList.AppendFormat("</li>");
            oList.AppendFormat("</ul>");

            sb.Append(oList);


        }

好的，我基本上在一个无序列表中有一个元素列表，然后是一个无序列表，其中包含一个包含元素本身的元素列表。

对于其中的每一个，我都试图选择开始日期

假设我在“OuteroListItems”中有 3 个无序列表，我想选择所有这 3 个 s.StartDates 并在“oListItems”中将它们涂成红色。

我试过这个但它只选择外部列表中的第一个元素第三个内部列表元素并将该元素着色为红色。

   $("ul#OuteroListItems li").each(function(){

    $("ul#oListItems li:eq(2)").css("color", "red");

    });

Answer 1

首先你需要使用类而不是 ID :) IDs have to be unique否则你会得到各种奇怪的行为......当它们不是唯一的时候它是无效的 HTML，只需更改 id=在您的代码中为 class=解决这个问题。您的输出现在应该如下所示:

<ul class='OuteroListItems'>
  <li>
    <ul class='oListItems'>
      <li>s.Name</li>
      <li>s.NameDesc</li>
      <li>s.StartDate</li>
      <li>s.EndDate</li>
    </ul>
  </li>
</ul>

然后您可以使用以下选择器来获取每个 StartDate <li> :

$(".oListItems li:nth-child(3)").css("color", "red");​

You can see a working example here