时间戳

首页 > 解决方案 > 我使用 jquery 无法获取 html p 元素文本

jquery - 我使用 jquery 无法获取 html p 元素文本

问题描述

以下是我页面上的 html，如果价格存在，我想获取商品价格。

    <ol id="ordered">
      <li class="itemnew">
           <span>#1</span>
           <p class="price">$22.99</p>
      </li>
      <li class="itemnew">
           <span>#2</span>
           <p>no price</p>
      </li>
      <li class="itemnew">
           <span>#3</span>
           <p class="price">$13.19</p>
      </li>
      <li class="itemnew">
           <span>#4</span>
           <p>no price</p>
    
     </li>
     <li class="itemnew">
         <span>#5</span>
         <p class="price">$22.79</p>
     </li>
    </ol>

我想要的结果如下：

1

22.99 美元

2

没有价格

3

13.19 美元

4

没有价格

5

22.79 美元

我的代码在这里，但不能工作。

    var numli = $('ol#ordered li');

    var rank=[];
    var price=[];

    for(var i=0;i<numli.length;i++){
        rank[i]=$(numli[i])has( "span" ).text();
        if($(numli[i]).has( "<p class="price">" )) {price[i]=$(numli[i]).has( "<p class="price">" ).text();}
    else{price[i]='no price';}
        
    }

标签： jquery

解决方案

根据评论中的讨论，更新为在不更改 HTML 结构的情况下工作，只需针对<p>标签而不是.price类：

function getPrices(){
    var priceString = '';
    Array.from(document.getElementsByClassName('itemnew')).map(function(item, index) {
        priceString += index + '' + item.getElementsByTagName('p')[0].innerHTML;
    });

    return priceString;
};

var prices = getPrices();
console.log(prices);

不能说 Jquery 代码，但这个 vanilla JS 会做的事情：

1.将所有价格元素归类为.price，无论其内容如何。

<ol id="ordered">
  <li class="itemnew">
       <span>#1</span>
       <p class="price">$22.99</p>
  </li>
  <li class="itemnew">
       <span>#2</span>
       <p class="price">no price</p>
  </li>
  <li class="itemnew">
       <span>#3</span>
       <p class="price">$13.19</p>
  </li>
  <li class="itemnew">
       <span>#4</span>
       <p class="price">no price</p>

 </li>
 <li class="itemnew">
     <span>#5</span>
     <p class="price">$22.79</p>
 </li>
</ol>

2.然后迭代值：

Array.from(document.getElementsByClassName('itemnew')).map(function(item, index) {
    console.log(index);
    console.log(item.getElementsByClassName('price')[0].innerHTML);
});

3.或者，正如您评论要求将它们全部显示在一个字符串中：

function getPrices(){
    var priceString = '';
    Array.from(document.getElementsByClassName('itemnew')).map(function(item, index) {
        priceString += index + '' + item.getElementsByClassName('price')[0].innerHTML;
    });

    return priceString;
};

var prices = getPrices();
console.log(prices);

推荐阅读