Question

这是我的HTML回复。

<div id="69" class="activateUiHTML" data-role="collapsible">
   <div style="" class="Topping-details" id="69">
      <section id="topping_tsection_69">
         <i id="topping-close"></i>
         <aside>
            <h6 class="tdHeading">Quantity      1</h6>
            <img src="images/arrow-topping.png">
            <section class="secclass"><a data-id="69" class="tpActive">Honey with Carmel  10 ML</a></section>
            <section class="secclass"><a data-id="69" class="tpActive">Honey with Carmel  10 ML</a></section>
         </aside>
         <aside>
            <h6 class="tdHeading">Quantity      2</h6>
            <img src="images/arrow-topping.png">
            <section class="secclass"><a data-id="69" class="tpActive">Honey with Carmel  10 ML</a></section>
            <section class="secclass"><a data-id="69">Honey with Carmel  10 ML</a></section>
         </aside>
         <aside>
            <h6 class="tdHeading">Quantity      3</h6>
            <img src="images/arrow-topping.png">
            <section class="secclass"><a data-id="69">Honey with Carmel  10 ML</a></section>
            <section class="secclass"><a data-id="69">Honey with Carmel  10 ML</a></section>
         </aside>
      </section>
   </div>
</div>

请问有什么人可以告诉我如何检索ID为69的类Topping-details的详细信息？

我试过这种方式

var id_attr_val = 69;
var html = $('.activateUiHTML#'+id_attr_val' .Topping-details').html();

Answer 1

使用rel而不是id并选择

$('.Topping-details','.activateUiHTML[rel="'+id_attr_val.toString()+'"]').html(); ...

请注意，您的选择器中存在语法错误，应为

$('.activateUiHTML#'+id_attr_val.toString()+' .Topping-details').html();

（+丢失且int未转换为字符串）

如果您不想将int强制转换为字符串，因为例如您从input获取它，只需删除.toString() ...但是，如果您手动声明它，请将其设为方式：

var id_attr_val = "69";

Answer 2

那里有三个问题。

首先，您要在多个元素上使用id="69"。您无法做到这一点，id值必须才是唯一的。因此，外部div上的id和内部div上的id必须不同。

第二个问题是你在形成字符串时错过+。

第三是为id形成一个以数字开头的id选择器是一个真正的痛苦：

最简单的答案是更改它，以便id不以数字开头。可能是outer69和inner69。

但是如果你无法改变它，一旦你删除了副本，就可以使用转义。 #69的转义版本为#\36\39，当然要将反斜杠放入字符串中，您必须将其转义。所以：

var id_attr_val = "\\36\\39"; // This is the escape for the id "69"
var html = $('.activateUiHTML#'+id_attr_val).find(".Topping-details").html();
alert(html);

请注意，我还将外部元素的查找与id分开，以找到其中的顶部。这纯粹是因为后代选择器由于某种原因没有起作用。

Live Example

当然，由于id值必须是唯一的，如果从内部元素中删除id，则可以避免使用CSS选择器：

var id_attr_val = "69";
var html = $(document.getElementById(id_attr_val)).find(".Topping-details").html();
alert(html);

由于getElementById不接受选择器，因此您可以避免转义它的问题。

Live Example

Answer 3

您有2个html元素，并且定义了相同的ID标记。您必须将代码更改为以下内容：

<div id="theId" class="activateUiHTML" data-role="collapsible">
   <div style="" class="Topping-details">
       ...
   </div>
</div>

现在您可以使用$('.activateUiHTML#' + 'theId' + ' .Topping-details').html()

这应该为您提供.Topping-details div的HTML内容：）

还要考虑不使用ID的数字（至少不是第一个字符）。

如何检索此特定div的HTML

3 个答案: