javascript - 附加具有与类匹配的 ID 的元素

Question

我发现了其他几个类似的问题，但我仍然没有得到所需的结果。

所以我有一个列表:

<ul>
  <li class="class1"></li>
  <li class="class2"></li>
  <li class="class3"></li>
  <li class="class4"></li>
  <li class="class5"></li>
</ul>

然后我有一组动态生成的跨度，其 ID 与这些类匹配。

<span id="class1"></span>
<span id="class2"></span>
<span id="class3"></span>
<span id="class4"></span>
<span id="class5"></span>

我需要将每个范围附加到其匹配的列表项中。因此，将 .class1 更改为 #class1。我想会有一些简单的事情，例如:

$(this).find('#' + this.className).appendTo(this);

有什么建议吗？

Answer 1

$("li[class^='class']").on("click", function(){
    $("#"+ this.className).appendTo(this);
});

jsBin demo

注意:一旦您向元素添加另一个类，您的代码就会中断:

<li class="class2 something"></li>

因为您会错误地搜索名为 #class2 some 的 ID 元素。

您最好使用 data-* 属性而不是类名称。

$("[data-get]").on("click", function(){
  $("#class"+ this.dataset.get).appendTo(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-get="1" class="class">1</li>
  <li data-get="2" class="class">2</li>
  <li data-get="3" class="class">3</li>
  <li data-get="4" class="class">4</li>
  <li data-get="5" class="class">5</li>
</ul>

<span id="class1">s1</span>
<span id="class2">s2</span>
<span id="class3">s3</span>
<span id="class4">s4</span>
<span id="class5">s5</span>