How to get all the "a" elements inside this div?-CodePudding

A website on Chrome has the following structure:

<div class="divClass">
  <a class="aClass"></a>
  <a class="aClass"></a>
  <a class="aClass"></a>
</div>

I'm using JQuery to get all the "a" elements inside the div. They all have the same class. The code I'm using in the devTools is this:

$("div[class='divClass'] > a")

But it only returns the first "a" element. How can I get all of them?

Snippet:

console.log($("div[class='divClass'] > a"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divClass">
  <a class="aClass"></a>
  <a class="aClass"></a>
  <a class="aClass"></a>
</div>

CodePudding user response：

You can just use $('.divClass > a')

An alternative is to use find() which gets the descendants of each element in the current set of matched elements so it can be helpful here

$(".divClass").find("a")

More about find - https://api.jquery.com/find/

CodePudding user response：

use .children method,

/*
var a1 = $(".divClass").children("a")[0].text;
var a2 = $(".divClass").children("a")[1].text;
var a3 = $(".divClass").children("a")[2].text; 
*/


var aaa = $(".divClass").children("a").text();
console.log(aaa);

CodePudding user response：

You can use a different selector, for instance:

$(".divClass > a.aClass")

This will find all a tags with class aClass that are immediate children of an element with class divClass. If you want to find all children throughout the DOM tree (i.e. grandchildren, great grandchildren, etc) then you can use omit the > operator.

You can then act on all elements matching these criteria (for instance .addClass("found"), or cycle through them individually using .each( function() { ....}) if you need to pull element specific information from them.

The demo below is fully commented.

DEMO

// Add click event to test button
$("#test").click( function() {

  // ACT ON ALL IN ONE LINE
  // Use jquery to find all direct children of elements with class divClass that are 'a' tags with class 'aClass'
  // Add red border using CSS styles
  $(".divClass > a.aClass").addClass("directChildren");
  
  // Find grandchildren, great grandchildren, etc
  // Turn color of text blue using CSS
  $(".divClass a.aClass").addClass("allChildren");
  
  // HOW TO CYCLE TRHOUGH EACH LINK
  // Cycle through each, find them using same technique as above 
  $(".divClass > a.aClass").each( function() {
  
    // Prove we've found each individual link
    console.log($(this).text());
    
  });
  
});

.directChildren {
  border: red 2px solid;
}

.allChildren {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divClass">
  <a class="aClass">Link 1</a>
  <a class="aClass">Link 2</a>
  <a class="aClass">Link 3</a>
  
  <div style="padding:12px;">
    <a class="aClass">Grandchild Link 1</a>
  </div>
  
</div>

<button id="test">Find Children</button>