Блог

Главная - Вопросы по программированию - Получение текста из пролетов с тем же классом

Получение текста из пролетов с тем же классом

#jquery

#jquery

Вопрос:

У меня 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>

Комментарии:

1. это все пролеты emty

2. либо вы читаете его до того, как элементы существуют, либо до того, как у них есть текст ….. прямо сейчас у них нет текста в примере… в dom также нет .text

3. Вы пытаетесь получить число из price_ класса?

Ответ №1:

Внутренняя карта this ссылается на DOM и не имеет никакого text свойства. Поэтому преобразуйте его в объект jQuery и получайте текстовое содержимое, используя text() метод или получая textContent свойство из объекта DOM.

 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>

Ответ №2:

Использует ванильный javascript innerText , на который text() ссылается jQuery.

 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>

Ответ №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( ", " ) );