CODEWITHSUNDEEP
javascriptjquery
JaSon
JaSon

Reputation: 189

Proper way to search for elements in divs with given class?

<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>

I'd like to search for links only in divs with "chooseme" classes (I add that class via javascript to those divs which I'm interested in), and get their number, or change their color - just for simple example.

These are:

I don't want any badpet divs, nor divs without the NEW text span.

I managed to do the selection of the divs and adding the class (I'm not sure if this is the best way):

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

but I can't reach the links from these divs. (In this example there should be 3 divs with the chooseme class: <div class="pet chooseme"> .) I can only get links from the whole document:

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

How could I run getElementsByTagName('a'); only with class "chooseme"? The next is not working:

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

And anything else I've tried gave errors. Like:

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

Upvotes: 2

Views: 636

Answers (4)

four
four

Reputation: 564

Here is another demo by filtering all a tags with parent() class .chooseme:

$('.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);
<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>

Upvotes: 1

pankaj goyal
pankaj goyal

Reputation: 121

Try this below code, hope it will help you.

$(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>

Upvotes: 1

Vlad Holubiev
Vlad Holubiev

Reputation: 5154

Since you started to use jQuery to add class names, what about this snippet to search for links?

$('.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>

Upvotes: 1

Falk
Falk

Reputation: 637

Don't make it more complicated than it has to be. You already use jQuery to add the class. Just keep using jQuery to select it now. 

$('.chooseme')

This gives you the all the divs with the chooseme class. Then you just chain selectors. JQuery works similar to CSS in that. It lets you either use multiple selectors in the same statement, either comma separated which just selects multiple elements or space separated which like div a which gives you all the a tags in a div. So in your case you want to use:

$('.chooseme a')

After that, you map over it and return the href for each a element. 

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

Upvotes: 1

Related Questions