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>

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

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>

Answer 2

您不必查找id即可进行更深入的搜索。由于您有对ul的引用，因此可以从那里进行更深入的搜索

$('#quiz').find('ul').each(function() {
  /*
  // not required
  const sentenceId = this.id; 
  alert(sentenceId)
  */
  const ul = $(this);
  const sentence = $.map(ul.find('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>

如何获取标签的ID并应用于操作ul

2 个答案: