Question

我的html与类总是不同，取决于其中的元素数量（ul＆gt; li ...）类名具有类似sf-single-children-*的模式，其中*总是不同，具体取决于里面的li。如何使用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);
}

请确保：

此课程始终是第一个
该类始终以这种方式格式化

如果您希望将其作为数字而不是强数，则必须转换它。

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/

根据原版的最新版本，这会做你想要的吗？

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的所述类获取sf-single-children-N并获取N（基于jQuery的解决方案）：

$('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
});

您也可以在类名中包含其他类。

vanilla 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

查找并获取类名的最后一个字符

7 个答案: