jQuery运行,获取SPANS值

时间:2017-11-09 01:12:47

标签: jquery html

首先发布这里,但一直在使用Stack试图学习一些jQuery。 我目前正在尝试重用一些代码,可以使用一些帮助。

我有一些以这种格式输出的数据,我很难理解如何抓取以“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>

这是我正在使用的jQuery函数,试图获取columnValue spans的文本 -

  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输出的一部分...... 感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:0)

您需要对.each()的结果使用.find()。第一个选择器应为id^=,而不是name^=

您还需要修复HTML,以便对重复的元素使用class而不是id

&#13;
&#13;
$("div[id^='itm_proddesc']").find(".columnValue").each(function() {
  var $columnValueGrab = $(this).text();
  console.log($columnValueGrab);
});
&#13;
<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>
&#13;
&#13;
&#13;