Получите содержимое абзаца внутри div, который находится внутри li, используя jquery - PullRequest
Новая
       1

Получите содержимое абзаца внутри div, который находится внутри li, используя jquery

1 голос
/ 24 февраля 2020

Используя jQuery Я хочу получить текст класса абзаца .card__text в div name="name" (ie. Rotten one); 

<li id="d318" class="cards__item long">
  <div class="card long">
    <div name="nick" class="card__content long cell0">
      <p class="card__text">Johnny one</p>
    </div>
    <div name="name" class="card__content long cell1">
      <p class="card__text">Rotten one</p>
    </div>
    <div name="descr" class="card__content long cell2">
      <p class="card__text">One. This was a story of Johnny Rotten</p>
    </div>
  </div>
</li>

Я пытался: 

$("li#d318").first('.name').text();
$("li#d318").closest('.card__text').text();

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Вместо использования атрибута 'name' для создания уникального div, я бы изменил 'cell0', 'cell1' и 'cell2' с имен классов на идентификаторы div, так как они не кажутся повторно и, следовательно, может быть уникальным идентификатором для каждого div. Вот пример того, что я имею в виду ... 

let text = $('#d318 #cell1 .card__text').text().trim()
console.log(text)
//or
$('#output').text(text);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<li id="d318" class="cards__item long">
  <div class="card long">
    <div id="cell0" class="card__content long">
      <p class="card__text">Johnny one</p>
    </div>
    <div id="cell1" class="card__content long">
      <p class="card__text">Rotten one</p>
    </div>
    <div id="cell2" class="card__content long">
      <p class="card__text">One. This was a story of Johnny Rotten</p>
    </div>
  </div>
</li>
<div> Results: <span id='output'></span></div>
</body>
</html>
0 голосов
/ 24 февраля 2020

Вы можете выбрать элемент напрямую, используя #d318 .card__content.cell1. Также обратите внимание, что элементы div не имеют атрибута name, поэтому ваш HTML недопустим. Эти атрибуты должны быть удалены. Попробуйте это: 

let text = $('#d318 .card__content.cell1').text().trim();
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="d318" class="cards__item long">
    <div class="card long">
      <div class="card__content long cell0">
        <p class="card__text">Johnny one</p>
      </div>
      <div class="card__content long cell1">
        <p class="card__text">Rotten one</p>
      </div>
      <div class="card__content long cell2">
        <p class="card__text">One. This was a story of Johnny Rotten</p>
      </div>
    </div>
  </li>
</ul>

Спасибо, но при условии, что у меня не было этих классов (cell0, cell1, cell2 ...), как бы Я go об этом?

В этом случае вы можете использовать :nth-child, например: 

let text = $('#d318 .card__content:nth-child(2)').text().trim();
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="d318" class="cards__item long">
    <div class="card long">
      <div class="card__content long cell0">
        <p class="card__text">Johnny one</p>
      </div>
      <div class="card__content long cell1">
        <p class="card__text">Rotten one</p>
      </div>
      <div class="card__content long cell2">
        <p class="card__text">One. This was a story of Johnny Rotten</p>
      </div>
    </div>
  </li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...