Question

我正在尝试通过其data-id属性选择元素。问题是由于某种原因它并不适用于所有元素。出于某种原因，下面的脚本仅适用于Rotor-Stator类别下的项目，而不适用于其他项目。

以下是HTML

的示例

<div class="prodCat">
  <button class="accordion prodCat even">Rotor-Stator Homogenizers</button>
  <div class="panel" id="rshom">
    <div class="item catlink" data-id="391">Tissue Master</div>
    <div class="item catlink" data-id="390">TH Tissue Homogenizer</div>
    <div class="item catlink" data-id="480">Micro Homogenizer</div>
    <div class="item catlink" data-id="481">THQ Digital Tissue Homogenizer</div>
    <div class="item catlink" data-id="395">GLH General Laboratory Homogenizer</div>
    <div class="item catlink" data-id="396">Mixer Homogenizer</div>
  </div>
  <button class="item prodCat" data-id="103" ">Automated Homogenizers</button>
  <button class="item prodCat even " data-id="108 ">Bead Mill Homogenizers</button>
  <button class="accordion prodCat ">Bead Mill Nucleic Acid Extractor</button>
  <div class="panel " id="bmnae ">
    <div class="item catlink " data-id="489 ">DNA Purification</div>
    <div class="item catlink " data-id="490 ">RNA Purification</div>
  </div>
</div>

这是Jquery：

这有效

$('.prodCatCol').find(".item[data-id='391']").css('background', 'red');

这不起作用

$('.prodCatCol').find(".item[data-id='489']").css('background', 'red');

非常感谢任何帮助，谢谢。

Answer 1

数据ID中的唯一标识符，用于值489＆amp; 490包含空格字符。这些data-id被视为字符串而不是整数。

所以一个选项：从数据ID

中删除空格

 <div class="panel " id="bmnae ">
      <div class="item catlink " data-id="489">DNA Purification</div>
      <div class="item catlink " data-id="490">RNA Purification</div>
</div>

此外，您还有HTML标记不一致，例如在data-id="103" "行中这3个双引号会给你标记问题。

Answer 2

好吧因为data-id="489 "就像其他几个人一样有空间。另外格式化你的HTML，否则你会遇到更多问题！

Answer 3

你在data-id =＆＃34; 489＆＃34;并在第11行添加了引用。

用它替换给定的html，然后尝试：

{{1}}

通过其data-id属性选择元素不适用于所有元素

3 个答案: