javascript - クラス名の最後の文字を検索して取得する

Question

内部の要素の量に応じて常に異なるクラスを持つhtmlがあります（ul> li ...）クラス名には、内部の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>方法がわかりません

score 1 · Accepted Answer

OK、最も簡単な解決策は、クラス名の最後の文字を取得することです。

このコードは、指定された要素の最初のクラスを取得し、最後のダッシュの後のすべての文字を取得します。

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

次のことを確認してください。

このクラスは常に最初です
クラスは常にこのようにフォーマットされます

ストロングではなく数値として使用する場合は、変換する必要があります。

デモ

score 0 · Accepted Answer

ここの行の間を読むと、サーバー側で子を持たない要素がいくつあるかを知っているように見えます。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

score 0 · Accepted Answer

あなたのような与えられた構造。N（jQueryベースのソリューション）liを含む上記のクラスで'を取得する方法：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
};

score 0 · Accepted Answer

以下のような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];
});

score 0 · Accepted Answer

要件に関するコメントを考えると、次のようになります。

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

フィドルの例

score 0 · Accepted Answer

これは役立つかもしれません。要素からクラス名を抽出し、その名前を分割して、記述した「*」を使用できるようにする方法を示しています。

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/

オリジナルの最新の mod に基づいて、これはあなたが探していることを行いますか?

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

score 0 · Accepted Answer

0

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

于 2013-02-10T13:50:44.647 に答える

javascript - クラス名の最後の文字を検索して取得する

7 に答える 7

Related

Reference