jQuery 从类中的所有元素中获取属性和值

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"));
}