Can you choose the class that has not yet been seen before?

Question

Can you choose the class that has not yet been seen before?

Imagine a scenario where the following code is present:

<div class="a">
    <div>1</div>
    <div>2</div>
    <div>
      <div>
        <div class="b">3</div>
      </div>  
    </div>
    <div>
      <div class="b">4</div>
    </div>
    <div>5</div>
    <div class="b">6</div>     
</div>

What we are uncertain about: The number of occurrences of class b (at least one), and their specific placements within the code.

What we have knowledge of: Class b will definitely be contained within class a (where a is the parent element).

The challenge at hand: How can we effectively target the first occurrence of class b? For instance, in the given code snippet, we need to select the class b with the content 3.

css

Answer 1

Answer №1

If you are looking for a way to find the first instance of a specific number within a div element that has a class of b, I've got you covered with a practical example below. All you have to do is set numToSelect = num, where num can be any number you wish to search for.

Take a look at the sample code snippet:

var numToSelect = 3;

var filter   = Array.prototype.filter,
    div = document.querySelectorAll('.b'),
    filtered = filter.call( div, ( node ) => node.innerText == numToSelect)[0];
    
console.log(filtered);

<div class="a">
    <div>1</div>
    <div>2</div>
    <div>
      <div>
        <div class="b">3</div>
      </div>  
    </div>
    <div>
      <div class="b">4</div>
    </div>
    <div>5</div>
    <div class="b">6</div>     
</div>

Answer 2

If you are looking for a way to find the first instance of a specific number within a div element that has a class of b, I've got you covered with a practical example below. All you have to do is set numToSelect = num, where num can be any number you wish to search for.

Take a look at the sample code snippet:

var numToSelect = 3;

var filter   = Array.prototype.filter,
    div = document.querySelectorAll('.b'),
    filtered = filter.call( div, ( node ) => node.innerText == numToSelect)[0];
    
console.log(filtered);

<div class="a">
    <div>1</div>
    <div>2</div>
    <div>
      <div>
        <div class="b">3</div>
      </div>  
    </div>
    <div>
      <div class="b">4</div>
    </div>
    <div>5</div>
    <div class="b">6</div>     
</div>

Answer 3

Answer №2

using javascript

document.querySelector('.b') will specifically target the first instance of a class called 'b'

this method allows for precision in selecting elements

<div>
   <div class="b">3</div>
</div>

Answer 4

using javascript

document.querySelector('.b') will specifically target the first instance of a class called 'b'

this method allows for precision in selecting elements

<div>
   <div class="b">3</div>
</div>

Can you choose the class that has not yet been seen before?

Answer №1

Answer №2

Similar questions

Change the background color of the selectInput component in Shiny to fit your

Hide, show, toggle, or empty elements using jQuery

Unusual discovery: Mysterious object manifesting in my HTML on Chrome/Webkit (with visual evidence and interactive demonstration)

Switch up the color of the following-mouse-div in real-time to perfectly complement the color that lies underneath it

What methods can be used to customize the font and background color of a website for different user groups?

Aligning a child div within a parent div using HTML/CSS where the child div takes up 30% of the parent div and

React forms are experiencing issues with characters overlapping

Are there any real-world examples you can share of utilizing CSS 3D Transforms?

Is there a way to switch the classList between various buttons using a single JavaScript function?

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

What could be the reason for the excess white space at the top and bottom of the page?

Could routerLinkActive be used to substitute a class rather than simply appending one?

Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

Managing Custom CSS Files in Sencha Touch 2 Production Build

Unable to see the changes made to the Understrap child-theme and the color variable in Sass is not

Injecting CSS into a dynamically created element within a Polymer component using jQuery

Changing Location of Carousel in Bootstrap

Manage image placement using CSS object-position

"Triggering an event after selecting and opening a file with an input of type file

Struggling to align materialUI input or textfield horizontally