Найти и получить последний символ имени класса

Question

У меня есть html с классом, который всегда отличается в зависимости от количества элементов внутри него (ul> li ...) имя класса имеет шаблон, подобный sf-single-children-* где * всегда отличается в зависимости от того, , Как я могу получить это * с javascript, так что я мог бы стиль в зависимости от этого числа?

Пример кода:

<ul class='someclass'> 
    <li class="sf-single-children-* some-other-classes-here-aswell"> 
     <ul style="width: * "> 
      <li>Item with no children element</li> 
      <li>Item with no children element</li> 
      <li>Item with no children element</li> 
      <li>Item with no children element</li> 
      <li>Item with no children element</li> 
      <li>Item with childer element which should not be counted 
       <ul> 
       <li>Item with no children element</li> 
       <li>Item with no children element</li> 
       <li>Item with no children element</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Другой способ, как я хотел бы сделать это его счет элементов только родителю <ul> Но я не уверен, как это сделать

Answer 1

ОК, самое простое решение, безусловно, просто получить последний символ имени класса.

Этот код получит первый класс указанного элемента и получит все символы после последней тире.

var number 
function getVal() { 
    var cls = $(".someclass > li").attr('class').split(' ')[0]; 
    number = cls.substr(cls.lastIndexOf("-") + 1); 
} 

Просто убедитесь, что:

1. Этот класс всегда первым
2. Класс всегда форматируется таким образом

Если вы хотите как число, а не сильный , вам придется преобразовать его.

DEMO

Answer 2

Вы можете использовать JQuery селекторы как ниже

$('ul > li[class^="sf-single-children-"]').each(function(){ 
    // u get all the 'li' elements with class starting with 'sf-single-children-' 
    // you can check the class with $(this).attr('class').split('-')[3]; 
}); 

Answer 3

Учитывая ваши комментарии на ваши требования, следующие будут работать:

$('.someclass > li').each(function() { 
    var liCount = $('> ul > li', this).filter(function() { 
     return $(this).children('ul').length == 0; 
    }).length; 
}); 

Example fiddle

Answer 4

Это может помочь, он показывает, как извлечь из имени класса элемента, и разбить это имя так, что «*» Вы описываете может быть использован.

var haystack = document.querySelector("ul>li"); 
var needle = haystack.getAttribute("class").split("-").pop(); 
console.log(needle); 

Если вы имеете в виду несколько классов в пределах одного определения класса, то:

var haystack = document.querySelector("ul>li"); 
for (var i=0; i<haystack.classList.length; i++) { 
    var needle = haystack.classList[i].split("-").pop(); 
    console.log(needle); 
} 

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

var haystack = document.querySelectorAll("ul>li"); 

for (var h=0; h<haystack.length; h++) { 
    for (var i=0; i<haystack[h].classList.length; i++) { 
    var needle = haystack[h].classList[i].split("-").pop(); 
    console.log(needle); 
    } 
} 

Пример: http://jsbin.com/igowaw/7/

Основываясь на последнем модном оригинале, делает ли это w шляпу, которую вы ищете?

var haystack = document.querySelectorAll("ul>li"); 
for (var h=0; h<haystack.length; h++) { 
    for (var i=0; i<haystack[h].classList.length; i++) { 
    var c = haystack[h].classList[i]; 
    if (c.indexOf("sf-single-children") === 0) { 
     var needle = c.split("-").pop(); 
     console.log(needle); 
    } 
    } 
} 

Пример: http://jsbin.com/igowaw/8/edit

Answer 5

var star = $(".someclass li").attr("class").split("sf-single-children-")[1]; 

Answer 6

данной структуры, как ваша. Как получить li «S с указанным классом, содержащим sf-single-children-N и получить (решение на основе JQuery) N:

$('li[class*="sf-single-children-"]').each(function() { 
    var classNames = this.className.split(' '), 
     count; 

    for (var i=0; !count && i<classNames.length; i++) 
     if (classNames[i].indexOf('sf-single-children-') == 0) 
      count = parseInt(classNames[i].replace('sf-single-children-', ''), 10); 

    // there you have it in the count 
    // with `this` being the element currently being inspected 
}); 

Вы можете иметь другие классы в имени класса, а также.

Решение ваниль Javascript (Sans-JQuery):

var elements = document.getElementsByTagName('li'); 
for (var i=0; i<elements.length; i++) { 
    if (elements[i].className.indexOf('sf-single-children-') < 0) 
     continue; 

    var classes = elements[i].className.split(' '), 
     count = 0; 

    for (var j=0; !count && j<classes.length; j++) 
     if (classes[j].indexOf('sf-single-children-') == 0) 
      count = parseInt(classes[j].replace('sf-single-children-', ''), 10); 

    // count contains the number you need 
    // elements[i] contains the element 
}; 

Но если вы хотите сделать подсчет на клиенте, учитывая, что li элементы, которые вы хотите узнать количество ul > li дочерних узлов для есть имя count-child-nodes класса, вы можете это сделать (с JQuery):

$('li.count-child-nodes').each(function() { 
    var count = $(this).find('> ul > li').length; 

    // you have the count here 
}); 

... или без JQuery:

var els = document.getElementsByTagName('li'); 
for (var i=0; i<els.length; i++) { 
    var el = els[i]; 
    if (!/\bcount-child-nodes\b/.test(el.className)) 
     continue; 

    for (var j=0, count=0; j<el.children.length; j++) { 
     var ul = el.children[j]; 
     if (ul.nodeName.toLowerCase() != 'ul') 
      continue; 

     for (var k=0; k<ul.children.length; k++) { 
      if (ul.children[k].nodeName.toLowerCase() == 'li') 
       count++; 
     } 
    } 

    // the count has your number 
}; 

Answer 7

Чтение между строк здесь, это выглядит, как вы знаете, на стороне сервера, сколько элементов есть, у которых нет детей. Если вы строите в HTML5 вы, вероятно, лучше использовать атрибут данных для этого, а не передавая его в классе, таким образом:

<ul class='someclass'> 
    <li class="some-other-classes-here-aswell" data-single-children="2"> 
     <ul style="width: * "> 
      <li>Item with no children element</li> 
      <li>Item with no children element</li> 
     </ul> 
    </li> 
</ul> 

Вы можете получить доступ к этим данным:

var x = document.querySelector("[data-single-children]"); 
console.log(x.dataset.singleChildren); 

Пример: http://jsbin.com/uqadub/1/edit