从父级向子级添加特定类

时间:2015-07-14 10:41:23

标签: javascript jquery html

我有一些带有子元素的列表项。我想要的是,李的每个孩子都根据他们的父母身份等级来上课。但是所有的元素都得到了第一个李的身份。

HTML

<ul>
  <li class="test post-91 other">
    <a class='link'></a> 
  </li>
  <li class="test post-43 other">
    <a class='link'></a>
  </li>  
</ul>

JQUERY

var id = $('.link').closest('li').attr("class").split(' ')[1];
id = id.replace(/[^0-9]/g, '');
id = "class-"+id;
$('.link').addClass(id);

我希望元素能够得到&#34; post - &#34;来自他们的父母。

https://jsfiddle.net/f5Lqzzew/

3 个答案:

答案 0 :(得分:2)

您需要根据特定的li元素本身计算类。为此,您可以将函数传递给addClass()方法。试试这个:

$('.link').addClass(function() {
    var id = $(this).closest('li').attr('class').split(' ')[1].replace(/[^0-9]/g, '');
    return 'class-' + id;
});

Updated fiddle

答案 1 :(得分:2)

另一个解决方案: 这里所有li都可以在循环中获取,然后在其中找到锚并将类分配给它。

$("ul li").each(function(){
    var id = $(this).attr('class').split(' ')[1].replace(/[^0-9]/g, '');
    $(this).find("a.link").text('class-' + id).addClass("class-"+id); // demo purposes only
});

Updated Fiddle

答案 2 :(得分:1)

更新脚本以对所有li进行循环。这工作......

<script>
$('ul li').prepend("<a class='link'></a>");

$('li').each(function(i,v){
  var v = $(this)[0].className;
  v = v.split(' ')[1];

    v = v.replace(/[^0-9]/g, '');
    v = "class-"+v;
  $(this).children('a.link').addClass(v);
  $(this).children('a.link').text(v);
});

</script>