Question

我有5个跨度，可能更多，全都属于.price类。

在阅读Jquery文档时，我发现最好的方法是使用map函数。像这样：

var prices = $(".price")
             .map(function () {
               return this.text;
             }).get().join();

我需要一个价格清单，所以之后我可以做类似（注意负20部分）：

$('.price').text(function (index) {
                            return "S/ " + prices[index]-20;
                        });

但是当我提醒prices时，我得到了一个空窗口。

html ：

<span class="price price_50">50</span>
<span class="price price_100">90</span>
<span class="price price_200">120</span>
<span class="price price_300">140</span>
<span class="price price_500">150</span>

Answer 1

内部映射this引用DOM，并且没有任何text属性。因此，将其转换为jQuery对象并使用text()方法获取文本内容，或从DOM对象获取textContent属性。

var prices = $(".price")
  .map(function() {
    return $(this).text();
  }).get().join();

console.log(prices)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<span class="price price_50">1</span>
<span class="price price_100">2</span>
<span class="price price_200">3</span>
<span class="price price_300">4</span>
<span class="price price_500">5</span>

Answer 2

Vanilla javascript使用innerText，这就是jQuery参考中的text()。

var prices = $(".price")
  .map(function() {
    return this.innerText;
  }).get().join();

console.log(prices)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<span class="price price_50">1</span>
<span class="price price_100">2</span>
<span class="price price_200">3</span>
<span class="price price_300">4</span>
<span class="price price_500">5</span>

Answer 3

每个范围内都需要一些内容。

<span class="price price_50">50</span>
<span class="price price_100">100</span>
<span class="price price_200">200</span>
<span class="price price_300">300</span>
<span class="price price_500">500</span>
<p id="list_price"></p>

 $( "p" )
  .append( $( ".price" ).map(function() {
       return $( this ).text();
        })
 .get()
 .join( ", " ) );

从同一个班级的跨区获取文本

3 个答案: