Question

我正在开发一个带有动画导航的项目。（Joomla在后台工作）

如何只检索class="item-##"，同时拥有多个类（如下所示）。

我的jQuery

$(document).ready(function(){
    var timer;
    var hover;

    $('#nav li').hover(
        function() {
/*Here!>>*/ var id = $(this).attr('class').split('-')[1];
            $('.moduletable-subNav ul').slideUp();
            $('#submenu-'+id).slideDown();
        },
        function(){
            var id = $(this).attr('id').split('-')[1];
            timer = setTimeout(function() { $('#submenu-'+id).slideUp(); },1000);
        }
    );

    $('.moduletable-subNav ul').hover(
        function(){
            clearTimeout(timer);
        },
        function(){
            var id = $(this).attr('id');
            timer = setTimeout(function() { $('#'+id).slideUp(); },1000);
        }
    );
});

我的HTML：

    <div class="moduletable">
    <ul class="menu" id="nav">
            <li class="item-109 current active parent"><a href="/tenc2012/burgerlijkrecht" >Burgerlijkrecht</a></li>
            <li class="item-110 parent"><a href="/tenc2012/strafrecht" >Strafrecht</a></li>
            <li class="item-108"><a href="/tenc2012/bestuursrecht" >Bestuursrecht</a></li>
    </ul>
    </div>
    <div class="moduletable-subNav">
            <ul class="menu" id="submenu-109">
                    <li class="item-114"><a href="/tenc2012/burgerlijkrecht/burgelijk-recht-deel-1" >Burgelijk recht deel 1</a></li>
            </ul>
            <ul class="menu" id="submenu-110">
                    <li class="item-117"><a href="/tenc2012/strafrecht/strafvordering" >Strafvordering</a></li>
            </ul>
    </div>

Answer 1

我有时会使用的一种技术是作弊，使用“rel”或其他未使用的属性来传递这样的东西。尝试设置：

<li ... rel="109">

然后得到：

$(this).attr('rel')

有点黑客，但很容易做到。

修改

使用karim79的“数据编号”建议的例子：

<li ... data-number="109">

和jQuery：

$(this).attr('data-number')

Answer 2

这就是我提出的：

var classes = $('li[class^="item-]"').prop('class').split('\s');
var theClass;
$.each(classes, function(){
    if (this.match(/^item-/))
        theClass = this;            
});

Answer 3

不确定我是否关注你，但你想要：

$('#nav li[class="item-109"]')

如果你想要这个号码，我想你可以做一个

$(this).attr('class').replace(/[^\d]/g, "");

或者更安全一点

$(this).attr('class').replace(/^.*(item\-\d+)$/, "$1");

Answer 4

试试这个：

var classes = $('#my_element').attr('class').split(" ");

var item_class = $(classes).filter(function(a,i) {
  return i.match(/item\-[0-9]+/);
});

console.log(item_class);

Answer 5

$(function(){
    $('li').each(function(){
        console.info($(this).attr('class').split(' ')[0]);
    });
});

jQuery - 检索单个特定的Class，同时具有多个

5 个答案: