添加額外的標識符的DOM元素

我有一大堆的菜單項列表格式，像這樣添加額外的標識符的DOM元素

<ul class="menu unselectable"> 
    <li class="group"> 
     Group Title 
     <ul> 
      <li class="groupItem i0">item 0</li> 
      <li class="groupItem i1 over">item 1</li> 
     </ul> 
    </li> 
    <li class="group"> 
     Another Group Title 
     <ul> 
      <li class="groupItem i2">item 2</li> 
      <li class="groupItem i1">item 1 (if I hover here, the others should too</li> 
     </ul> 
    </li> 
</ul>

的想法是，如果我將鼠標懸停在一個項目有i1類，那麼所有i1項目應具有相同的行爲。所以我想把over加到所有i1的項目上，當我把它們懸停在任何一個項目上時。

$(".groupItem").hover(
    function() { 
     $(this).addClass("over"); 
    }, 
    function() { 
     $(this).removeClass("over"); 
    } 
);

問題是我不能想辦法確定哪些項目剛剛從$(this)一邊上徘徊。爲了彌補這一點，我想添加i1作爲id項目，但不同的DOM節點不應該有相同的id。我的下一個想法是屬性value添加到li項目，但無濟於事（當我做了一個快速測試與$(this).val()保持返回0，而不管實際存儲在節點的value的。

有什麼辦法，我可以添加一個標識符，所以我只能說$(this).<someIdentifier>，並針對所有的DOM節點與標識？

來源

2011-12-22 vvMINOvv

你就不能想出比使用'$什麼一直徘徊（「過」） '？ – 2011-12-22 21:35:45

您可以添加屬性groupID="{id}"，然後調用$(this).attr('groupID')

來源

2011-12-22 21:32:28 Daniel

或者使用HTML5「data-groupID」屬性並使用「.data（'groupID'）」來訪問該值... ... – Pointy 2011-12-22 21:35:14

您通常可以添加任意屬性，所以這應該可行，但如果您打算這樣做它可以像使用記錄（並在HTML5中受支持）的數據屬性那樣使用「data-」前綴，如下所示：'data-groupID =「{id}」 – 2011-12-22 21:35:35

簡單而優雅。我喜歡它！！謝謝@Daniel – vvMINOvv 2011-12-22 21:35:38

$(this).filter('#selector')

來源

2011-12-22 21:35:09 vmex151

對不起，這不是我正在尋找。感謝所有儘管@ vmex151歡呼。 – vvMINOvv 2011-12-22 21:59:11

Element.prototype.secondId = '';

，比

document.getElementById('id5').secondId = 13;

由於這只是你的任何元素上設置，您可以使用一個新的屬性，如你所願，但僅僅是在JavaScript在HTML。

來源

2011-12-22 21:35:11 khael

這也行得通，但我不得不說，丹尼爾有點優雅。謝謝Khael – vvMINOvv 2011-12-22 21:37:48

我不建議將假屬性的元素，這將工作，即使數據屬性不能很好的用戶的瀏覽器支持：

$(".groupItem").hover(
    function() { 
     var className = this.className.split(' ')[1]; 
     $('.' + className).addClass("over"); 
    }, 
    function() { 
     var className = this.className.split(' ')[1]; 
     $('.' + className).removeClass("over"); 
    } 
);

注：需要你指定的類都井井有條以上。一個更安全的方式可以是：

var className = $.trim(this.className.replace('groupItem',''));

來源

2011-12-22 21:40:11 glortho

這實際上不是一個壞主意@Jed好想法：D！ – vvMINOvv 2011-12-22 22:00:16

請嘗試下面的代碼工作如下一次：

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<style> 
.menu{ display:inline;} 
.menu li{ display:inline; float: left;width: 100px;} 
.menu li ul{display:none;} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".group").hover(
    function() { 
     $(this).find("ul").show(); 
    }, 
    function() { 
     $(this).find("ul").hide(); 
    } 
    ); 
}); 
</script> 
</head> 
<body> 
<ul class="menu"> 
    <li class="group"> 
     Group Title 
     <ul> 
      <li>GT 1</li> 
      <li>GT 2</li> 
     </ul> 
    </li> 
    <li class="group"> 
     Trochlear Nerve 
     <ul> 
      <li>TN 1</li> 
      <li>TN 2</li> 
     </ul> 
    </li> 
</ul> 
</body> 
</html>

來源

2011-12-22 21:42:12

感謝您的所有努力@Umesh如果我的問題具有誤導性，我真的很抱歉，但這並不是我想到的。我會盡量在下次更好地說出我的問題。乾杯 – vvMINOvv 2011-12-22 21:58:27

添加額外的標識符的DOM元素

回答

相關問題