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 something的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>

Answer 2

我的解决方案，如果我理解正确的话：

$(function() {     
        $("span[id^='class']").each(function() {
                var liObj = $("li[class='" + this.id + "']");
                if (liObj.length == 1) {
                    $(this).appendTo(liObj);
                }
        });
}

Answer 3

很抱歉没有发布我的所有代码。这似乎没必要。答案是：

{{1}}

我知道这简直太愚蠢了。感谢所有回复的人！

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

3 个答案: