jquery - jQuery - 检索一个特定的类，同时有多个

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')

有点hack，但做起来相当简单。

编辑

使用 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]);
    });
});