javascript - 在给定类的 div 中搜索元素的正确方法？

Question

<div class="therarepets">
    <div class="rarepet">
        <span>OLD</span>
        <a href="http://examplepetshop.com/abc">Buy it.</a>
    </div>
    <div class="rarepet">
        <span>NEW</span>
        <a href="http://examplepetshop.com/def">Buy it.</a>
    </div>
 </div>

    <a href="http://examplepetshop.com/vwx">OutsideLinkDontWant.</a>

<div class="thegoodpets">
    <div class="goodpet">
        <span>OLD</span>
        <a href="http://examplepetshop.com/ghi">Buy it.</a>
    </div>
    <div class="goodpet">
        <span>NEW</span>
        <a href="http://examplepetshop.com/jkl">Buy it.</a>
        <a href="http://examplepetshop.com/stu">CanHaveMoreWantedLinks.</a>
    </div>
    <div class="goodpet">
        <span>NEW</span>
        <a href="http://examplepetshop.com/mno">Buy it.</a>
        <a href="http://otherpetshop.com/zzz">OuterLinkDontWant.</a>
    </div>
</div>

<div class="thebadpets">
    <div class="badpet">
        <span>NEW</span>
        <a href="http://examplepetshop.com/pqr">Buy it.</a>
    </div>
</div>

我只想在带有“chooseme”类的 div 中搜索链接(我通过 javascript 将该类添加到我感兴趣的那些 div 中)，并获取它们的编号或更改它们的颜色 - 只是为了简单示例。

它们是:

• 具有 rarepet 类的 div，其跨度为 NEW

• 和带有 goodpet 类的 div，其跨度为 NEW

我不想要任何 badpet div，也不想要没有新文本范围的 div。

我设法选择了 div 并添加了类(我不确定这是否是最好的方法):

$('.rarepet:has(span:contains("NEW"))').addClass('chooseme');
$('.goodpet:has(span:contains("NEW"))').addClass('chooseme');

但我无法从这些 div 访问链接。 (在这个例子中，应该有 3 个带有 chooseme 类的 div:<div class="pet chooseme">。)我只能从整个文档中获取链接:

var petlinks = document.getElementsByTagName('a');
for (var i=0;i<petlinks.length;i++){
    var href = petlinks[i].href;
    if(href.indexOf('examplepetshop.com') !=-1){
        (petlinks[i].href).length;
    }
}

我如何运行 getElementsByTagName('a');只有“chooseme”类？下一个不起作用:

var petlinks = document.getElementsByTagName('.chooseme > a');

我尝试过的任何其他方法都出错了。喜欢:

var wantedlist = document.getElementsByClassName('chooseme');
var petlinks = wantedlist.getElementsByTagName('a');

Answer 1

不要让它变得比它必须的更复杂。您已经使用 jQuery 来添加类。现在继续使用 jQuery 来选择它。

$('.chooseme')

这为您提供了带有 chooseme 类的所有 div。然后你只需链式选择器。 JQuery 的工作原理与 CSS 相似。它允许您在同一语句中使用多个选择器，逗号分隔仅选择多个元素或空格分隔，如 div a 为您提供 div 中的所有 a 标签。所以在你的情况下你想使用:

$('.chooseme a')

之后，您映射它并返回每个 a 元素的 href。

$('.chooseme a').map(function(index, link) {return link.href});