1

我正在寻找一些 jQuery 代码的帮助。

基本上我有一个这样的HTML结构。

<ul class="menu">
    <li><a href="#" id="parent-one">One</a></li>
    <li><a href="#" id="parent-two">Two</a></li>
    <li><a href="#" id="parent-three">Three</a></li>
    <li><a href="#" id="parent-four">Four</a></li>
</ul>

如果用户“打开”它，我的 PHP 代码会添加一个 class="active"，因此根据点击哪个链接，它看起来像这样：

<li><a href="#" class="active" id="parent-four">Four</a></li>

所以这一切都相当简单。

我希望在页面加载时能够做的是搜索每个菜单项，直到找到带有 class="active" 的菜单项。然后获取该链接的 ID，将其从 parent-xxx 更改为 child-xxx 并然后“显示”该子 ID。

这可能吗？

4

6 回答 6

3 
$(function() {
    // Within .menu, find .active, grab its id, and replace parent with child
    var new_id = $('.menu').find('.active').attr('id').replace('parent', 'child');

    // Select element with this new id, and show it.
    $('#' + new_id).show();
});​

小提琴：http: //jsfiddle.net/rwgJc/1/

于 2012-11-07T06:31:05.770 回答
2

像这样简单的事情

var id = $('ul.menu li a.active').attr('id').replace('parent', 'child');
$('#' + id).show();
于 2012-11-07T06:34:28.527 回答
1 
​$('ul li a').each(function(){
  if($(this).hasClass('active')){
      alert($(this).prop('id')); //your action here
  }
});​​​

//or as  techfoobar suggested
alert($('ul.menu li a.active').prop('id'));
于 2012-11-07T06:31:01.997 回答
1

像这样的东西应该工作：

// get the link with class 'active'
var activeLink = $('.menu li a.active');

// determine the new id, i.e. child-xyz
var newID = 'child-' + activeLink.attr('id').split('-')[1];

// assign that to the active link
activeLink.attr('id', newID);

// do other stuff with newID
于 2012-11-07T06:33:16.640 回答
0

您需要遍历所有 li 元素并检查当前 li 是否具有 active 类

演示 

$('ul li').each(function () {
     if($(this).hasClass('active')) {
           // do whatever you want
     }
});
于 2012-11-07T06:29:52.933 回答
0

不是优化的，但这会起作用

$("ul.menu li").each(function(){
a=$(this).find('a');
if(a.hasClass('active')){
id=a.attr('id');
a.attr('id',"child-"+id.split("-")[1]);
}
});

工作演示：http: //jsfiddle.net/sCUfp/

于 2012-11-07T06:42:39.777 回答