Javascript Bookmarklet - 在页面上打开多个链接
我想制作一个小书签,这样当我进入 Digg 时,我只需单击它即可在新选项卡中打开前 10 篇故事。
页面上的 HTML 如下所示:
<div id="topten-list">
<div class="news-summary img-thumb">
<h3>
<a href="/comics_animation/Pokemon_COMIC">Pokemon - (COMIC)
<span>
<em style="background-image: url("/comics_animation/Pokemon_COMIC/a.png");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/comics_animation/Pokemon_COMIC">
<strong>1872</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary img-thumb">
<h3>
<a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic">
I am never drinking with you assholes again [Pic]
<span>
<em style="background-image: url("/comedy/I_am_never_drinking_with_you_assholes_again_Pic/a.png");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic">
<strong>1650</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/comedy/xkcd_Hell">xkcd: Hell
<span>
<em style="background-image: url("/comedy/xkcd_Hell/a.png");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/comedy/xkcd_Hell">
<strong>1407</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True">
6 Ridiculous History Myths (You Probably Think Are True)
<span>
<em style="background-image: url("/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True">
<strong>1216</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART">
Why Every Chick Flick Is Starting to Look The Same [CHART]
<span>
<em style="background-image: url("/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART">
<strong>978</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary img-thumb">
<h3>
<a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic">WTF
World of FAST FOOD! [Graphic]
<span>
<em style="background-image: url("/food_drink/WTF_World_of_FAST_FOOD_Graphic/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic">
<strong>874</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix">
10 Things You Don't Know About My Life As a Dominatrix
<span>
<em style="background-image: url("/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix">
<strong>751</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary img-thumb">
<h3>
<a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic">Star
Trek Transporter Mishap (pic)
<span>
<em>thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic">
<strong>667</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary vid-thumb">
<h3>
<a href="/pc_games/StarCraft_2_Beta_Breakup_Video">StarCraft
2 Beta Breakup (Video)
<span>
<em style="background-image: url("/pc_games/StarCraft_2_Beta_Breakup_Video/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/pc_games/StarCraft_2_Beta_Breakup_Video">
<strong>627</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama">
Jon Stewart: FL Doc Won't Touch Yr Penis If You Voted
Obama
<span>
<em style="background-image: url("/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama">
<strong>508</strong>
</a>
</li>
</ul>
</div>
</div>
因此,在每个具有“news-summary”类的 div 中,都有一个链接。我怎样才能让javascript浏览div“topten-list”并打开每一个?
I want to make a bookmarklet so that when I go on Digg, I can simply click it and have the top 10 stories open up in new tabs.
The HTML on the page looks like this:
<div id="topten-list">
<div class="news-summary img-thumb">
<h3>
<a href="/comics_animation/Pokemon_COMIC">Pokemon - (COMIC)
<span>
<em style="background-image: url("/comics_animation/Pokemon_COMIC/a.png");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/comics_animation/Pokemon_COMIC">
<strong>1872</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary img-thumb">
<h3>
<a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic">
I am never drinking with you assholes again [Pic]
<span>
<em style="background-image: url("/comedy/I_am_never_drinking_with_you_assholes_again_Pic/a.png");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic">
<strong>1650</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/comedy/xkcd_Hell">xkcd: Hell
<span>
<em style="background-image: url("/comedy/xkcd_Hell/a.png");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/comedy/xkcd_Hell">
<strong>1407</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True">
6 Ridiculous History Myths (You Probably Think Are True)
<span>
<em style="background-image: url("/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True">
<strong>1216</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART">
Why Every Chick Flick Is Starting to Look The Same [CHART]
<span>
<em style="background-image: url("/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART">
<strong>978</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary img-thumb">
<h3>
<a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic">WTF
World of FAST FOOD! [Graphic]
<span>
<em style="background-image: url("/food_drink/WTF_World_of_FAST_FOOD_Graphic/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic">
<strong>874</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix">
10 Things You Don't Know About My Life As a Dominatrix
<span>
<em style="background-image: url("/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix">
<strong>751</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary img-thumb">
<h3>
<a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic">Star
Trek Transporter Mishap (pic)
<span>
<em>thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic">
<strong>667</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary vid-thumb">
<h3>
<a href="/pc_games/StarCraft_2_Beta_Breakup_Video">StarCraft
2 Beta Breakup (Video)
<span>
<em style="background-image: url("/pc_games/StarCraft_2_Beta_Breakup_Video/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/pc_games/StarCraft_2_Beta_Breakup_Video">
<strong>627</strong>
</a>
</li>
</ul>
</div>
<div class="news-summary news-thumb">
<h3>
<a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama">
Jon Stewart: FL Doc Won't Touch Yr Penis If You Voted
Obama
<span>
<em style="background-image: url("/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama/a.jpg");">
thumb</em>
</span></a>
</h3>
<ul class="news-digg">
<li class="digg-count">
<a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama">
<strong>508</strong>
</a>
</li>
</ul>
</div>
</div>
So within each div with the class "news-summary", there is a link. How can I get javascript to go through the div "topten-list" and open each one?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我更喜欢使用 jQuery
,但要在外部站点上应用它,请尝试这个(提示我从上一个线程复制粘贴)
我建议创建一个包含两个 iframe 的页面,一个用于导航到指定网站,另一个用于获取 DOM 对象。
在第一个导航到该站点,然后选择其 HTML 并
将其附加到第二个 Iframe 的正文中。
然后在第二个 iframe 中,您将加载 jquery 脚本,并且可以运行此代码。
告诉我进展如何
I would prefer to use jQuery
but to apply it on external site try this (hint i copy paste from my prev thread)
I suggest to create a page with two iframes one to navigate to the designated website and other to get DOM Objects.
in the first one navigate to the site and then select its HTML and
append it in the body of the second Iframe.
then in the second iframe you will have the jquery script loaded and you can run this code.
tell me how it goes
解决方案是这样的:我创建了一个 Javascript for 语句,该语句循环遍历 topten-list div 并选择所有名为“a”的标签。
最后的书签是这样的:
Ta-da!
The solution was this: I created a Javascript for statement which looped through the topten-list div and selected all tags named 'a'.
The final bookmarklet is this:
Ta-da!