Question

我有一个如下所示的无序列表：

<ul>
    <li class="week6"></li>
    <li class="week6"></li>
    <li class="week6"></li>
    <li class="week6"></li>
    <li class="week6"></li>
</ul>

我想基于它的类在ul之前添加带有文本的头元素。像这样：

<h1 class="week">Week 6</h1>
<ul>
    <li class="week6"></li>
    <li class="week6"></li>
    <li class="week6"></li>
    <li class="week6"></li>
    <li class="week6"></li>
</ul>

并且标题元素内的内容将基于类，例如如果类为“week6”，则h1将为“第6周”，“week5”类将在h1内输出“第5周”。 / p>

现在我遇到的问题是在与该类相关的列表项的ul之前添加具有特定内容的h1标记。

Answer 1

$("ul").each(function(){
  var weeknum = $(this).children('li:first').prop('class');
  var weeknum = weeknum.match(/\d+/);
  /* Remove if first li is only a placeholder: $(this).children('li:first').remove(); */
  $(this).before('<h1 class="week">Week '+weeknum+'</h1>');
});

小提琴：http://jsfiddle.net/TGmap/

用class查找第一个元素，使用class来追加header元素

1 个答案: