Question

怎么用jquery给几个相同的标签动态添加不同的id？我的代码如下，分数不多，求各位大神解答

var title=$("p.title-season");//获取所有class为title-season的p元素
var season=$("div.season");//获取所有class为-season的div元素
for(i=0;i<season.length;i++){
if(i==title.length){
season.length(i).setAttribute("id","cnContent");//为国配剧集添加id
$("#cnContent").css("display","none");
}
if(i<season.length&&i!=0){
season.length(i).setAttribute("id","jpContent");//为日配剧集添加id
$("#jpContent").css("display","none");
}
}
for(i=0;i<title.length;i++){
if(i==title.length){
title.length(i).setAttribute("id","cn");//为国配标题添加id
$("#cn").css("cursor","pointer");
$("#cn").live('click',function(){
$("#cnContent").toggle();
});
}
if(i<title.length&&i!=0){
title.length(i).setAttribute("id","jp");//为日配标题添加id
$("#jp").css("cursor","pointer");
$("#jp").live('click',function(){
$("#jpContent").toggle();
});
}
}
<p class="title-season">日配HD版</p>
<div class="season">
<a class="btn btn-ep active primary" href="" data-aid="893545" data-vid="765811">01-02话</a>
<a class="btn btn-ep" href="" data-aid="894374" data-vid="766560">03-04话</a>
</div>
<p class="title-season">日配TV版</p>
<div class="season">
<a class="btn btn-ep" href="" data-aid="294630" data-vid="771968">第1话</a>
<a class="btn btn-ep" href="" data-aid="294630" data-vid="771969">第2话</a>
</div>
<p class="title-season">国语配音版</p>
<div class="season">
<a class="btn btn-ep" href="" data-aid="294630" data-vid="771968">第1话</a>
<a class="btn btn-ep" href="" data-aid="294630" data-vid="771969">第2话</a>
</div>

Answer 1

首先添加id是可以的，只是每一个添加id的语句，例如title.length(i).setAttribute("id","cn");
语法有问题，写成title[i].setAttribute("id","cn");就可以；
其次，对元素添加id也要尽量保证id的唯一；
最后，由于页面中p.title-season 和div.season 个数相同；i==title.length这种判断将永远为false

追问

那应该怎么改呢？HTML里的代码都是JS动态生成的，.title-season和.season是他们必须要有的样式，所以我要用id区分他们才好对他们操作。i应该是会自加的啊，怎么会i==title.length永远为false？求大神帮忙改改

Answer 2

var title = $('p.title-season');//标题
var content = $('div.season');//内容
title.next().hide();//隐藏所有内容
title.on('click' , function(){//当点击标题的时候
    var me = $(this);//得到当前点击的标题
    me.next().toggle();//显示/隐藏 内容
});

看你的代码，大概是想实现，点击标题，显示/隐藏标题对应的内容

这样的代码就可以实现，不用加id的

追问

对，是想实现点击p标签然后显示或者隐藏div，不过我加了你的代码后还是没效果啊，求大神再看看到底是哪的问题，还有，这个HTML代码是动态生成的，所以让我很犯难

追答

不知道你的html是怎么异步生成的，如果是服务端生成的话，你可以这样写

var $doc = $(document);//这次事件注册到文档上
$doc.on('click' , 'p.title-season' , function(){//当点击标题的时候
    var me = $(this);//得到当前点击的标题
    me.next().toggle();//显示/隐藏 内容
});
$(function(){//当页面准备就绪，则隐藏所有的内容
    $('p.title-season').next().hide();
})

如果是ajax异步生成的代码则大概需要这样写

var $doc = $(document);//这次事件注册到文档上
$doc.on('click' , 'p.title-season' , function(){//当点击标题的时候
    var me = $(this);//得到当前点击的标题
    me.next().toggle();//显示/隐藏 内容
});

$.ajax({//ajax异步请求
    url : '',
    success : function(result){
        //这里执行生成html的代码
        
        $('p.title-season').next().hide();//代码生成完成后隐藏内容
    }
})

这只是一个例子，你看具体情况才可以应用

追问

我想实现的是加载完成后第二三个div也就是日配TV和国语配音所对应的div隐藏，然后点击他们标题，也就是p标签显示出对应的div内容，再点击就隐藏。不过现在我已经实现了，谢谢你的回答

Answer 3

加id有这个必要吗？

追问

因为body内的内容是动态生成的，我需要单个的对他们进行操作，动态的给他们添加id后操作就会方便很多，不过只要能获取到单个的不加id也行

Answer 4

对添加的id有要求吗？没有的话可使用随机数

追问

我的想法是获取p标签和div的集合，然后用for循环length得到他们的位置为他们添加id，可是不知道我这方法为什么不行

追答

season.length(i).setAttribute("id","cnContent");改成$(season[i]).attr("id","cnContent"),其他赋值也改成这样

追问

可是还是没效果，还有别的方法吗？

追答

不加id直接隐藏不行吗？$(season[i]).css("display","none");