Question

我实施了一个按钮，可以将内容附加到网页上。它工作正常，但它也会在页面的一半处创建重复的信息。我已经浏览了我的HTML以找到原因，但找不到任何东西。

出了什么问题？

$(document).ready(function() {
  $('#Wresults').click(function() {
    $('#content').append('<ul />');
    $('span[class="Name"]').each(function() {
      $('ul').append('<li>' + $(this).text() + '</li>');
    });
  });
});

#womens_results {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="ResultsTitle"> Run Results for October 28th </h1>
<input type='button' value='Womens Results' id='Wresults' />
<div id="textHolder">
  <section id="womens_results">
    <article>
      <span class="Name">Rachael Armstrong</span>
    </article>
    <article>
      <span class="Name">Christine Boyd</span>
    </article>
    <article>
      <span class="Name">Jane Jameson</span>
    </article>
  </section>
</div>
<div id="content">
</div>

Answer 1

页面上必须有ul，我在您提供的代码中添加了ul，并且可以复制结果：

$(document).ready(function() {
  $('#Wresults').click(function() {
    $('#content').append('<ul />');
    $('span[class="Name"]').each(function() {
      $('ul').append('<li>' + $(this).text() + '</li>');
    });
  });
});

#womens_results {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="ResultsTitle"> Run Results for October 28th </h1>
<input type='button' value='Womens Results' id='Wresults' />
<div id="textHolder">
  <section id="womens_results">
    <article>
      <span class="Name">Rachael Armstrong</span>
    </article>
    <article>
      <span class="Name">Christine Boyd</span>
    </article>
    <article>
      <span class="Name">Jane Jameson</span>
    </article>
  </section>
</div>
<ul><li>extra list</li></ul>
<div id="content">
</div>

我建议您将ul添加到变量中，然后使用此选项将li添加到如下：

$(document).ready(function() {
  $('#Wresults').click(function() {
   var womansResultList= $('#content').append('<ul/>');
    $('span[class="Name"]').each(function() {
      womansResultList.append('<li>' + $(this).text() + '</li>');
    });
  });
});

#womens_results {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="ResultsTitle"> Run Results for October 28th </h1>
<input type='button' value='Womens Results' id='Wresults' />
<div id="textHolder">
  <section id="womens_results">
    <article>
      <span class="Name">Rachael Armstrong</span>
    </article>
    <article>
      <span class="Name">Christine Boyd</span>
    </article>
    <article>
      <span class="Name">Jane Jameson</span>
    </article>
  </section>
</div>
<ul><li>extra list</li></ul>
<div id="content">
</div>

Answer 2

你想要发生什么并不是很清楚。发生了什么事情，每次点击都会附加UL。然后，您将为每个UL添加名称。如果您只想为第一个UL添加名称，可以使用ul：first。如果你想在第一次检查是否有任何ul时添加名称，然后添加，如果没有。请参阅下面的代码。

$(document).ready(function() {
  $('#Wresults').click(function() {
  
  if ($('#content ul').length == 0){
  
    $('#content').append('<ul >');
    $('span[class="Name"]').each(function() {
      $('ul:first').append('<li>' + $(this).text() + '</li>');
    });
    }
  });
});

#womens_results {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="ResultsTitle"> Run Results for October 28th </h1>
<input type='button' value='Womens Results' id='Wresults' />
<div id="textHolder">
  <section id="womens_results">
    <article>
      <span class="Name">Rachael Armstrong</span>
    </article>
    <article>
      <span class="Name">Christine Boyd</span>
    </article>
    <article>
      <span class="Name">Jane Jameson</span>
    </article>
  </section>
</div>
<div id="content">
</div>

按钮创建列表中间页面，以及我想要创建它的位置

2 个答案: