javascript - 使用jquery获取li内div内的段落内容

Question

使用 jQuery 我想获取 div name="name" 中段落类 .card__text 的文本(即 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();

Answer 1

您可以直接使用 #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>

Thanks, but assuming I did not have those classes (cell0, cell1, cell2...), how would I go about it?

在这种情况下，您可以使用 :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>