Spotting the top-tier class amidst the rest using jQuery - a guide

Question

Spotting the top-tier class amidst the rest using jQuery - a guide

There is a single link containing various div classes:

<a class='div1 otherdiv alignleft'>Link</a>

I want to extract the first class of this link and store it in a variable. How can I achieve this without knowing the specific name of the first class?

Since the name of the first div class may vary, I cannot declare a fixed variable like var firstdiv = div1

Is there a way to retrieve the name of the first class and save it in a variable for later use in a function? For example:

var firstdiv = ('a').first();

Then utilize this variable in a function:

$(firstdiv).click(function(){
    // my function
});

How can I accurately identify the name of the initial div within the a tag?

jquery html css class identify

Answer 1

Answer №1

$('a > div:first')

|OR|

$.('a > div').first()

Check out: http://api.jquery.com/first/

If you have already linked the click to the a tag, you can try something like this:

$(document).on('click', 'a', function(e) {
    var firstDiv = $(this).children('div').first();
    alert(firstDiv.attr('name');
});

Here are some related resources:

Answer 2

$('a > div:first')

|OR|

$.('a > div').first()

Check out: http://api.jquery.com/first/

If you have already linked the click to the a tag, you can try something like this:

$(document).on('click', 'a', function(e) {
    var firstDiv = $(this).children('div').first();
    alert(firstDiv.attr('name');
});

Here are some related resources:

Answer 3

Answer №2

It's as easy as pie! Check out this helpful code snippet http://jsfiddle.net/hj8Vb/

HTML Code Sample

<div id="bla" class="div1 another align test">Content</div>

jQuery Script

$('#bla').click(function(){
    alert($(this).attr('class').split(" ")[0]);
});

Answer 4

It's as easy as pie! Check out this helpful code snippet http://jsfiddle.net/hj8Vb/

HTML Code Sample

<div id="bla" class="div1 another align test">Content</div>

jQuery Script

$('#bla').click(function(){
    alert($(this).attr('class').split(" ")[0]);
});

Spotting the top-tier class amidst the rest using jQuery - a guide

Answer №1

Answer №2

Similar questions

checking the validity of serialized information in Ajax

Ways to achieve text transparency with CSS without converting it to an image

Limiting the width of text using CSS or PHP

Do GPU-intensive animations get impacted by the CPU's load?

Show individual JSON values from a Python response on a webpage using HTML

Avoiding the use of angle brackets in XSLT语

A guide on updating the appearance of a list of comma-separated tags using HTML, CSS, and jQuery

Discovering Xpath using the full path is still possible

After pressing submit, any associated links should automatically open in a separate tab

What is the reason the .clearfix class fails to properly clear a floated element?

What is causing .attr('title') to retrieve the title of the element before?

What causes the browser to freeze while loading HTML content from an iframe into its parent element?

Activate Input by Clicking on Label in Internet Explorer version 8

Issue with Angular's ng-show failing to display an image post-processing

A common occurrence is for jQuery/Javascript Ajax POST to generate 6 identical posts when used within a .each loop, happening approximately 20

Bootstrap 4's Grid System: Embracing the Square Grid

`Unable to process JSON information from Google Places`

What is preventing me from accessing the hidden article using the URL with the hashname?

issue with accessing global variable within class block

"The Ajax function for replacing a div upon change event is not functioning properly