Jquery - 如何将每个 DIV.section 的 id 作为锚点#放在每个 li> a href 中？

Question

我正在尝试从 .section div 中获取 ID，并将每个 li > a 的序列作为 href 锚点“#”，并从 .section > h3 中获取值文本输入 li > a 对应 .section ID.

HTML（渲染）：

<div id="tabs_wrap">
  <ul> 'Js render list here' </ul>
</div>
<div class="section sc-01" id="title01">
  <h3>Title-01</h3>
</div>
<div class="section sc-02" id="title02">
  <h3>Title-02</h3>
</div>
<div class="section sc-03" id="title03">
  <h3>Title-03</h3>
</div>
<div class="section sc-04" id="title04">
  <h3>Title-04</h3>
</div>
<div class="section sc-05" id="title05">
  <h3>Title-05</h3>
</div>

JS:

$('.section h3').text(function() {
  $(this).parents().eq(0).attr('id', $(this).text().toLowerCase().replace(/[^\w ]+/g, '').replace(/ +/g, '').substring(0, 14));
});


var secH3 = $('.section h3').each(function() {
  $(this).text();
});
var secId = $('.section').each(function() {
  $(this).attr('id');
});

$('.section').each(function() {
  $('#tabs_wrap ul').append('<li><a></a></li>');
});

$('#tabs_wrap ul > li a').each(function() {
  $(this).attr('href', '#' + secH3);
});

Answer 1

H, 我想你只需要这个

   //Let's loop on all the sections
$('.section').each(function(){
      var label = $(this).find('h3').html(); // we find the h3 tag on each sectin
      var id = $(this).attr('id');//we find the id of each section
      // then we build the li tag within the a tag inside with the dynamic var label and id we just created.
      $('#tabs_wrap ul').append('<li><a href="#'+id+'">'+label+'</a></li>');
 });

见http://codepen.io/anon/pen/RPGXNK