0

我的 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>但我不知道该怎么做

4

7 回答 7

1

好的，最简单的解决方案肯定是只获取类名的最后一个字符。

此代码将获取指定元素的第一个类并获取最后一个破折号之后的所有字符。

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

只要确保：

  1. 这门课永远是第一
  2. 类总是以这种方式格式化

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

演示

于 2013-02-10T15:04:15.983 回答
0

您可以使用如下的 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];
});
于 2013-02-10T13:40:09.943 回答
0

鉴于您对您的要求的评论，以下将起作用：

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

示例小提琴

于 2013-02-10T13:43:29.693 回答
0

这可能会有所帮助，它展示了如何从元素中提取类名，并分解该名称以便可以使用您描述的“*”。

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

于 2013-02-10T13:48:23.610 回答
0 
var star = $(".someclass li").attr("class").split("sf-single-children-")[1];
于 2013-02-10T13:50:44.647 回答
0

给定像你这样的结构。如何使用包含并获取 N（基于 jQuery 的解决方案）li的所述类获取 's ：sf-single-children-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
};
于 2013-02-10T14:13:54.160 回答
0

从这里的字里行间看，您似乎知道在服务器端有多少没有子元素的元素。如果您在 HTML5 中构建，则最好为此使用 data 属性，而不是在类中传递它，因此：

<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

于 2013-02-10T17:17:50.800 回答