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

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>