jquery - 从另一个元素窃取类而不使用 hasClass()

Question

我有一个列表，

<ul class="thisList">
  <li><a href="" class="iconViewport icon_import"><span>Import</span></a></li>
  <li><a href="" class="iconViewport icon_products"><span>Artikel</span></a></</li>
</ul>

我想要 jquery-“窃取”每个 li 的第二个类，插入一个 img 元素并将窃取的类附加到它。我不能使用 hasClass 因为类每次都不同。

有人可以帮我纠正以下问题：

var thief = $('.thisList li a').className.split(/\s+/);
var booty = thief[1];
$('.thisList li a').after('<img class="someOtherClass'+booty+'" />');

我试图将 a 的所有类放入一个数组中，然后窃取该数组的第二个元素并将其附加到插入的 img 标签上。

尚未工作...感谢您的帮助！

Answer 1

$('.thisList li a') 生成一个集合，而不是单个元素，因此您需要对其进行迭代。在构建图像时，您还缺少一个空格。

$('.thisList li a').each(function() {
    var thief = this.className.split(/\s+/);
    var booty = thief[1];
    $(this).after('<img class="someOtherClass ' + booty + '" />');
});

Answer 2

您必须循环遍历链接，并单独处理每个链接。否则，您将无法获取每个类的 className 属性。 $('.thisList li a').className 无论如何都不起作用，因为 className 是 DOM 元素的属性，而不是 jQuery 对象的属性。

这应该可以做到：

$('.thisList li a').each(function() {
    var booty = this.className.split(/\s+/)[1];
    $(this).after('<img class="someOtherClass '+booty+'" />');
});

如果“窃取”类意味着删除它，那么您还可以调用：

$(this).removeClass(booty);

更新： 演示

Answer 3

它不起作用的原因是 $('.thisList li a') 返回一个 jquery 对象，该对象没有属性 className。

这是一个未经测试的尝试

$('.thisList li a'). each(function(index, el){
   var class2 = el.className.split(/\s+/)[1];
   $(el).after('<img class="someOtherClass '+class2+'" />');
})

到底为什么你的变量名为 booty？哇，有两个人比我先一步！

Answer 4

已测试并工作：

var classString = '';

$('.thisList li a').each(function(){
  var elements = $(this).attr('class').split(' ');
  classString += ' ' + elements[1];
});

$('.thisList').after($('<img class="someOtherClass'+classString+'"/>'));