jquery - 如何获取标签的id并应用于操作ul的内容

Question

我正在尝试检索包含在多个无序列表中的字符串。下面的脚本获取 ul id (alert( sentenceId))，但是在下一行中，当我尝试sentenceId用作标识符来检索字符串时，我什么也得不到。

$('#quiz').find('ul').each(function() {
  let sentenceId = $(this).attr('id');
  alert(sentenceId)
  sentence = $.map($('#sentenceId li'), function(element) {
    return $(element).text()
  }).join(' ');
  alert(sentence)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='quiz'>
  <ul class="scramble" id="Q1">
    <li>I</li>
    <li>piano</li>
    <li>can't</li>
    <li>play</li>
    <li>the</li>
    <button onclick="checkOrd(id);">Check</button>
  </ul>

  <ul class="scramble" id="Q2">
    <li>moon</li>
    <li>green</li>
    <li>is</li>
    <li>disc</li>
    <li>a</li>
    <li>the</li>
    <button onclick="getOrd(id);">Check</button>
  </ul>
</div>

如何使用我的 sentenceId 作为每个唯一列表的 id？如果我用#Q1 或#Q2 替换#sentenceId，我会得到返回的字符串。

标签： jquery

Answer 1

问题是sentenceId一个变量，你应该这样使用：

$('#' + sentenceId + ' li')

$('#quiz').find('ul').each(function() {
  let sentenceId = $(this).attr('id');
  alert(sentenceId);
  sentence = $.map($('#' + sentenceId + ' li'), function(element) {
    return $(element).text();
  }).join(' ');
  alert(sentence)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='quiz'>
  <ul class="scramble" id="Q1">
    <li>I</li>
    <li>piano</li>
    <li>can't</li>
    <li>play</li>
    <li>the</li>
    <button onclick="checkOrd(id);">Check</button>
  </ul>

  <ul class="scramble" id="Q2">
    <li>moon</li>
    <li>green</li>
    <li>is</li>
    <li>disc</li>
    <li>a</li>
    <li>the</li>
    <button onclick="getOrd(id);">Check</button>
  </ul>
</div>