如何获得动态生成的html的标题？

Question

我有以下代码：

for(var i = 0;i < choices.length; i++){
     var $plans = $("<li id='entirePlan' class='Solution_ID'></li>").html('<p id="plan_id" class="plan_class">Plan: '+(i+1)+'</p>');
}

这会在我的网站上最多创建三个不同的计划。 （可以有1个计划，2个计划或3个计划）。如果这三个都存在，它看起来像

计划：1

-----计划信息----

计划：2

-----计划信息----

计划：3

-----计划信息----

我希望能够检查每个计划中的信息，如果它等于某些条件，则隐藏该计划。像这样：

if(myCondition === something){
    if(plan1 exists){
         //hide plan 1
    }
}else if(myCondition === something){
     if(plan2 exists){
         //hide plan 2
    }
}else if(myCondition === something){
     if(plan3 exists){
         //hide plan 3
    }
}

但是，我无法获取计划编号以隐藏它。这是动态生成的计划之间的唯一区别。我尝试了以下内容：

$('p#plan_id.plan_class'))
$('#plan_id'))
$('.plan_class'))
$('#plan_id.plan_class'))

然后在它们的末尾使用.html（）或.text（）。我无法得到它的计划编号。我想要尝试做类似的事情：第一，第二，第三，但也无法获得这样的价值。

我在.js文件中工作，但更喜欢先使用jquery。 javascript作为最后的手段。建议吗？

- 更新： 我也试过Luizgrs的答案。我尝试使用我的标题和解决方案ID旁边的

添加数据编号。我在console.log中测试过，看看我是否得到了我需要的东西。我用过：

console.log("plan?", $('.Solution_ID').data('number'));
console.log("plan?", $('.Solution_ID[data-number=1]'));
console.log("plan?", $('.plan_class').data('number'));
console.log("plan?", $('.plan_class[data-number=1]'));

我得到了：

唯一一个我在远程看到的东西，比如我在该对象中需要的东西是在childElementcount = 1.我尝试将childElementcount附加到上面的调用结束但是出错了。

我在下面使用console.log尝试了typeoneerror的建议解决方案，看看我能不能得到我想要的东西：

console.log("plan?", $('#entirePlan_1 p'));
console.log("plan?", $('#entirePlan_1 p').text());
console.log("plan?", $('#entirePlan_1 p').html());

结果： 不工作的人，我不知道为什么..

Answer 1

您似乎拥有choices.length个li个具有相同“id”的标签，即 wholePlan 。您可能希望这些ID是唯一的。您可以将i附加到ID并删除p的ID ...

for (var i = 0; i < choices.length; i++) {
     var $plans = $("<li id='entirePlan_'" + (i + 1) + " class='Solution_ID'></li>").html('<p class="plan_class">Plan: ' + (i + 1) + '</p>');
}

然后你的李的外观类似于：

<li id='entirePlan_1' class='Solution_ID'>

你可以通过jQuery“选择”它们，如下所示：

$('#entirePlan_1')
$('#entirePlan_2')
// etc

并获取p标记中的文字：

$('#entirePlan_1 p').text() // Plan: 1

Answer 2

使用数据属性。这是为向HTML元素添加特定信息而创建的功能。

让我们假设您最终得到以下HTML：

<li class="Solution_ID"><p ...></li>
<li class="Solution_ID"><p ...></li>
<li class="Solution_ID"><p ...></li>

添加名为data-number

的新属性

<li class="Solution_ID" data-number="1"><p ...></li>
<li class="Solution_ID" data-number="2"><p ...></li>
<li class="Solution_ID" data-number="3"><p ...></li>

您可以使用.data()方法使用jQuery检索该值：

$('.Solution_ID').data('number') //will retrieve 1, 2 or 3

或选择特定计划：

$('.Solution_ID[data-number=2]');

还要注意你正在使用的ID，不要重复它们！