如何获取动态生成的 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() 的内容。我不知道它是什么计划编号。我想过尝试做一些类似的事情：first，：second，：third，但也无法以这种方式获得价值。

我正在使用 .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”，即entirePlan。您可能希望这些 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 看起来类似于：

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

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

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

或选择一个特定的计划：

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

还要注意你使用的ID，不要重复！