jQuery的獲得attibutes和值從一個類中的所有元素

Question

我颳了一個網站，它具有以下HTML結構

<div id="list" class="book-list"> 
    <div id="stream_1" class="stream collapsed"> 
     <h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3> 
     <div class="volume last"> 
      <h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4> 
      <ul class="chapter"> 
       <li id="b-922893" class="new"> 
        <span> 
         <a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a> 
        </span> 
        <i>Yesterday 08:27 am</i> 
        <em> 
        <a href="link/1" target="_blank">1</a> 
        <a href="link/3-1" target="_blank">3</a> 
        <a href="link/6-1" target="_blank">6</a> 
        <a href="link/10-1" target="_blank">10</a> 
        <a href="link" target="_blank">all</a> 
        of 44        </em> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div id="stream_5" class="stream"> 
     <h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3> 
     <div class="volume last"> 
      <h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4> 
      <ul class="chapter"> 
       <li id="b-922873" class="new"> 
        <span> 
         <a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a> 
        </span> 
        <i>Yesterday 08:10 am</i> 
        <em> 
        <a href="links5/c1/1" target="_blank">1</a> 
        <a href="links5/c1/3-1" target="_blank">3</a> 
        <a href="links5/c1/6-1" target="_blank">6</a> 
        <a href="links5/c1/10-1" target="_blank">10</a> 
        <a href="links5/c1" target="_blank">all</a> 
        of 44        </em> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

我想使用jQuery得到的div鏈接獲得類似這

{ 
"vol.1 ch.1" : "link/1", 
"ch.2" : "link/2" 
} 

因爲所有我想要的物品具有類ch sts我想與選擇，讓他們，並試圖用each()但沒有奏效，因爲它顯示節點...

這裏是如何我試圖：

$d('.ch').map(function(){ 
    console.log('This: href',$(this).attr("href")); 
}).get(); 

Answer 1

它比你想象的簡單。既然你提到你只想解析與ch sts類的鏈接，我改變了選擇器。

var map = {}; 
 

 
$(".ch.sts").each(function() { 
 
    map[$(this).text()] = $(this).attr("href"); 
 
}); 
 

 
console.log(map);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="list" class="book-list"> 
 
    <div id="stream_1" class="stream collapsed"> 
 
     <h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3> 
 
     <div class="volume last"> 
 
      <h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4> 
 
      <ul class="chapter"> 
 
       <li id="b-922893" class="new"> 
 
        <span> 
 
         <a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a> 
 
        </span> 
 
        <i>Yesterday 08:27 am</i> 
 
        <em> 
 
        <a href="link/1" target="_blank">1</a> 
 
        <a href="link/3-1" target="_blank">3</a> 
 
        <a href="link/6-1" target="_blank">6</a> 
 
        <a href="link/10-1" target="_blank">10</a> 
 
        <a href="link" target="_blank">all</a> 
 
        of 44        </em> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div id="stream_5" class="stream"> 
 
     <h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3> 
 
     <div class="volume last"> 
 
      <h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4> 
 
      <ul class="chapter"> 
 
       <li id="b-922873" class="new"> 
 
        <span> 
 
         <a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a> 
 
        </span> 
 
        <i>Yesterday 08:10 am</i> 
 
        <em> 
 
        <a href="links5/c1/1" target="_blank">1</a> 
 
        <a href="links5/c1/3-1" target="_blank">3</a> 
 
        <a href="links5/c1/6-1" target="_blank">6</a> 
 
        <a href="links5/c1/10-1" target="_blank">10</a> 
 
        <a href="links5/c1" target="_blank">all</a> 
 
        of 44        </em> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

1. 獲取所有與類名的元素。
2. 獲取文本值和「href」屬性。

x = document.getElementsByClassName("ch sts"); 
for(i =0; i<x.length; i++) { 
    console.log(x[i].text +" "+ x[i].getAttribute("href")); 
}