How to get the current class name in jquery

jQuery is a popular JavaScript library that provides some very convenient methods for working with HTML elements and page interactions. In many cases, we need to get the class name of the current element to perform various operations, such as adding, deleting, or switching class names. This article will explain how to use jQuery to get the current class name and provide some examples.

1. Basic method of getting the current class name

To get the class name of the current element, you can use jQuery's .attr() method and pass "class" as a parameter:

var className = $("element").attr("class");

Among them, "element" is a jQuery selector string, which can be any valid CSS selector, such as class name, ID, tag name, etc. This code will return a string containing all the class names of the current element, separated by spaces.

For example, we have the following HTML code:

<div class="box small"></div>

We can use the following code to get the class name of the current element:

var className = $("div.box.small").attr("class");
console.log(className); // 输出 "box small"

2. Use the classList attribute to get the current class name

In addition to using jQuery's .attr() method, you can also use the classList attribute of native JavaScript to get the current class name, for example:

var className = $("element")[0].classList;

Among them, "[0]" converts the jQuery object is a DOM node. This code will return a DOMTokenList object containing all class names, making it easy to add, delete and switch class names.

For example, we have the following HTML code:

<div class="box small"></div>

We can use the following code to get the class name of the current element:

var classList = $("div.box.small")[0].classList;
console.log(classList); // 输出 ["box", "small"]

3. Basic operation class name

1. Add a class name

To add a class name through jQuery, you can use the .addClass() method. For example:

$("element").addClass("new-class");

where "new-class" is the name of the class to be added. This code will add a class name called "new-class" to the current element.

For example, we have the following HTML code:

<div class="box small"></div>

We can use the following code to add a new class name:

$("div.box.small").addClass("big");

This will add a name to the current element For the class name of "big", the updated HTML code is as follows:

<div class="box small big"></div>

2. Delete the class name

To delete the class name through jQuery, you can use the .removeClass() method. For example:

$("element").removeClass("old-class");

where "old-class" is the name of the class to be deleted. This code will remove a class named "old-class" from the current element.

For example, we have the following HTML code:

<div class="box small"></div>

We can use the following code to remove a class name:

$("div.box.small").removeClass("small");

This will remove a class name from the current element. small" class name, the updated HTML code is as follows:

<div class="box"></div>

3. Switch class name

To switch class names through jQuery, you can use the .toggleClass() method. For example:

$("element").toggleClass("class1 class2");

Among them, "class1 class2" is the class name to be switched, and multiple class names are separated by spaces. This code will switch between two class names in the current element, removing them if they already exist in the current element, otherwise adding them.

For example, we have the following HTML code:

<div class="box small"></div>

We can use the following code to switch between two class names:

$("div.box.small").toggleClass("small big");

This will remove a class named from the current element "small" class name, and add a class name named "big", the updated HTML code is as follows:

<div class="box big"></div>

4. Application examples

The following are some examples to show how Use jQuery to get the current class name:

1. Output the current class name when an element is clicked:

$("div").click(function() {
  var className = $(this).attr("class");
  console.log(className);
});

2. Switch the style of the navigation bar when the window is scrolled:

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop >= 100) {
    $("nav").addClass("fixed-top");
  } else {
    $("nav").removeClass("fixed-top");
  }
});

3. Update the image title when switching images in the carousel:

$(".carousel-item").on("slide.bs.carousel", function() {
  var captionText = $(this).find(".carousel-caption h4").text();
  var className = $(this).attr("class");
  console.log("当前类名：" + className);
  $(".slider-title").text(captionText);
});

Summary

Through this article, we learned how to use jQuery to get the current class name, and used some examples to show how to do it. Class name. The current class name can be obtained directly through the .attr() method, and the class name can be easily added, deleted, and switched using the .classList attribute. Having this knowledge makes it easier to work with HTML elements and styles when writing JavaScript code.

The above is the detailed content of How to get the current class name in jquery. For more information, please follow other related articles on the PHP Chinese website!