使用 jquery 從嵌套的 div 標簽中獲取所有錨標簽文本

Question

我想獲取所有錨標記鏈接文本並將它們推送到數組中，因此所有鏈接文本都將可用到數組中，我嘗試使用 jquery 但由於嵌套 div 無法分別獲取每個鏈接文本

 let data = [] $(".main-class").each((i, elem) => { data.push({ link_text: $(elem).find(".header-text a").text() }) }); console.log(data)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div="main-class"> <div class="upper-class"> <section class="home-item"> <div> some text here</div> <div class="header-text" > <a href="www.xyz.com">Link 1 text</a> </div> <div class="header-text" > <p></p> </div> </section> <section class="home-item"> <div> some text here</div> <div class="header-text"> <a href="www.xyz1.com">Link 2 text</a> </div> <div class="header-text"> <p></p> </div> </section> <section class="home-item"> <div> some text here</div> <div class="header-text"> <a href="www.xyz2.com">Link 3 text</a> </div> <div class="header-text"> <p></p> </div> </section> </div> </div>

Answer 1

原因是.find("a").text()會將所有a的所有文本組合成一個文本 - 這就是 jquery .text()的工作原理。

您需要“循環”每個“a”，而不是對所有這些“a”使用單個.text()調用。

保持最近的代碼（使用.push ），最簡單的方法是更改選擇器，而不是添加內部.each

    let data = []
    $(".main-class .header-text a").each((i, elem) => {
      data.push({
        link_text: $(elem).text()
      })
    });

這可以通過使用.map為您處理創建數組和 .push 縮短為一行：

let data2 = $(".main-class .header-text a").map((i, elem) => { return { link_text: elem.textContent }}).get();

更新的片段（包括錯字修復）

 let data = [] $(".main-class.header-text a").each((i, elem) => { data.push({ link_text: $(elem).text() }) }); //console.log(data) let data2 = $(".main-class.header-text a").map((i, elem) => { return { link_text: elem.textContent }}).get(); console.log(data2)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-class"> <div class="upper-class"> <section class="home-item"> <div> some text here</div> <div class="header-text" > <a href="www.xyz.com">Link 1 text</a> </div> <div class="header-text" > <p></p> </div> </section> <section class="home-item"> <div> some text here</div> <div class="header-text"> <a href="www.xyz1.com">Link 2 text</a> </div> <div class="header-text"> <p></p> </div> </section> <section class="home-item"> <div> some text here</div> <div class="header-text"> <a href="www.xyz2.com">Link 3 text</a> </div> <div class="header-text"> <p></p> </div> </section> </div> </div>

Answer 2

它工作，你在這里做錯了： <div="main-class">應該是<div class="main-class">

編輯：如果你想要單獨的項目，你寧願使用map() ；

 var arr = $(".main-class").find(".header-text a").map(function() { return $(this).text(); }).get(); console.log(arr);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-class"> <div class="upper-class"> <section class="home-item"> <div> some text here</div> <div class="header-text" > <a href="www.xyz.com">Link 1 text</a> </div> <div class="header-text" > <p></p> </div> </section> <section class="home-item"> <div> some text here</div> <div class="header-text"> <a href="www.xyz1.com">Link 2 text</a> </div> <div class="header-text"> <p></p> </div> </section> <section class="home-item"> <div> some text here</div> <div class="header-text"> <a href="www.xyz2.com">Link 3 text</a> </div> <div class="header-text"> <p></p> </div> </section> </div> </div>