jQueryが機能し、SPANSの値を取得

Question

ここに最初の投稿がありますが、いくつかのjQueryを学ぶためにStackを使用しています。 私は現在、少しのコードを再利用しようとしており、何か助けを借りることができます。

このタイプの形式で出力されるデータがありますが、 "itm_prodesc"で始まる各DIVの "columnValue"スパンで終わるテキストを取得する方法を理解するのに苦労しています ここHTMLのサンプルです -

<div class="GridDetails" id="itm_proddesc167"> 
    <span id="columnName">Description</span> 
    : 
    <span id="columnValue">data data data data data data data data</span> 
</div> 
<div class="GridDetails" id="itm_proddesc168"> 
    <span id="columnName">Description</span> 
    : 
    <span id="columnValue">data data data data data data data data</span> 
</div> 

は、そして、これは私がしようとするとcolumnValueのテキストをつかむためにスパンを再使用して使用していますjQueryの機能である -

function prodListing(){ 
    $("div[name^='itm_proddesc']").find(".columnValue") 

    $(".columnValue").each(function(){ 
     var $columnValueGrab = $(this).text(); 
     var $ProdDesc = $columnValueGrab.split(';'); 
     var $ul = $("<div class=ProdDesc></div>"); 

     for(i=0;i < $ProdDesc.length; i++){ 

      if($ProdDesc[i] !== undefined && $ProdDesc[i] !== '') 

      { 
       if(i==0){ 
        $ul.append("<h3 class='ProdTitle'>"+$ProdDesc[i] +"</h3>"); 
       } 
       else{ 
        $ul.append("<li class='ProdDesc'>"+$ProdDesc[i] +"</li>"); 
       } 

      } 
     } 

     $(this).html(" "); 
     $(this).append($ul); 

    }); 
} 

はい...」 rougue "コロンは実際にはHTML出力の一部です。 。 ご提供いただけるお手伝いをありがとうございます。

Answer 1

.find()の結果には、.each()を使用する必要があります。そして、最初のセレクタはではなく、id^=でなければなりません。

繰り返し要素にはidではなく、classを使用するようにHTMLを修正する必要があります。 HTMLで

$("div[id^='itm_proddesc']").find(".columnValue").each(function() { 
 
    var $columnValueGrab = $(this).text(); 
 
    console.log($columnValueGrab); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="GridDetails" id="itm_proddesc167"> 
 
    <span class="columnName">Description</span> : 
 
    <span class="columnValue">data data data data data data data data</span> 
 
</div> 
 
<div class="GridDetails" id="itm_proddesc168"> 
 
    <span class="columnName">Description</span> : 
 
    <span class="columnValue">data data data data data data data data</span> 
 
</div>