すべての要素で機能していないdata-id属性による要素の選択

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

値489 & 490のデータIDの一意の識別子には、空白文字が含まれています。これらのデータ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> 

からスペースを削除し、あなたはこれらの3二重引用符はあなたにマークアップの問題を与えるdata-id="103" " に沿って、例えばHTMLマークアップをinconsistenています。あなたは、データID内のスペースを残してい

Answer 2

まあdata-id="489 "にはいくつか他のものと同様のスペースがあります。また、あなたのHTMLをより多くフォーマットすれば、より多くの問題を解決できます！

Answer 3

=「489」としてみてください、それに与えられたHTMLを置き換えライン11

に追加引用符を追加しました：

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