在给定类中搜索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中），并获取它们的数字，或者改变它们的颜色 - 只是为了简单示例

这些是：

• 使用稀有类的div，其内容为新

• 并使用goodpet类进行div，其内容为新

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

我设法选择了div并添加了类（我不确定这是否是最好的方法）：

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

但是我无法从这些div中获得链接。 （在这个例子中，应该有4个带有selectme类的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;
    }
}

我怎么能只用“selectme”课程来运行getElementsByTagName('a');？下一个不起作用：

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

我尝试过的任何其他内容都会出错。像：

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

Answer 1

既然您开始使用jQuery添加类名，那么搜索链接的代码片段呢？

$('.rarepet:has(span:contains("NEW"))').addClass('chooseme');
$('.goodpet:has(span:contains("NEW"))').addClass('chooseme');
var wantedlist = $('.chooseme a')
  .map(function(index, link) {
    return link.href;
  })
  .toArray()
  .filter(function(link) {
    return link.indexOf('examplepetshop.com') > -1;
  })

console.log(wantedlist);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</div>

Answer 2

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

$('.chooseme')

这为您提供了具有选择类的所有div。然后你只是链选择器。 JQuery的工作方式类似于CSS。它允许您在同一语句中使用多个选择器，逗号分隔，只选择多个元素或空格分隔，如div a，它为您提供div中的所有标记。所以在你的情况下你想使用：

$('.chooseme a')

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

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

Answer 3

请尝试以下代码，希望它能为您提供帮助。

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

			var total_href = 0;
			$( "a" ).each(function() {
				if($(this).parent().hasClass('chooseme')){
					console.log('href :',total_href ,$( this ).attr('href'));
					total_href = total_href+1;
				}
				
			});

			console.log('total count of href in chooseme class:',total_href);
			$('.chooseme a').css('color', 'red');
		});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	
</head>
<body>
	<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>
</body>
</html>

Answer 4

以下是使用a类parent()过滤所有.chooseme代码的另一个演示：

＆＃13;

＆＃13;

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

// links holds all links found inside chooseme class
var links = [];

// linkObj holds all 'a' tags element
var linkObj = $('a').filter(function(indx, elem){
    if ($(elem).parent().hasClass('chooseme'))
    {
        // push all selected hrefs in links array
    	links.push($(elem).attr('href'));
      
        // change color of that elem
        // can be done by another method outside this loop though
        // e.g. $('.chooseme a').css('color', 'red')
    	$(elem).css('color', 'red'); 
        return true; // return this elem and store in linkObj
    }
});
console.log(links);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;