Добавить определенный класс в дочерний элемент от родителя

Question

У меня есть элементы списка с дочерним элементом. Я хочу, чтобы каждый дочерний элемент li получал класс на основе класса id своих родителей. Но все элементы получают идентификатор первого li.

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); 

Я хочу, чтобы элементы, чтобы получить число из "пост-" от своего родительского ли.

https://jsfiddle.net/f5Lqzzew/

Answer 1

Еще одно решение: Здесь все литий могут быть приняты в петлю, а затем найти якорь внутри него и присвоить класс к нему.

$("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

Answer 2

Вам нужно вычислить класс на основе самого конкретного li элемента. Для этого вы можете передать функцию методу addClass(). Попробуйте это:

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

Updated fiddle

Answer 3

Update сценарий, чтобы сделать петлю на всех Ли. Это работает ...

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