使用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>

謝謝，但假設我沒有這些類（ cell0 、 cell1 、 cell2 ...），我該怎么做？

在這種情況下，您可以像這樣使用: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>

Answer 2

我不會使用“name”屬性來創建唯一的 div，而是將“cell0”、“cell1”和“cell2”從類名更改為 div 的 id，因為它們似乎沒有被重用，因此可以是每個 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>

使用jquery獲取li內的div內的段落的內容

問題描述

2 個解決方案

解決方案1
0 已采納 2020-02-24 20:35:29

解決方案2
0 2020-02-24 20:53:50

使用jquery獲取li內的div內的段落的內容

問題描述

2 個解決方案

解決方案1 0 已采納 2020-02-24 20:35:29

解決方案2 0 2020-02-24 20:53:50

解決方案1
0 已采納 2020-02-24 20:35:29

解決方案2
0 2020-02-24 20:53:50