jQuery :lang() Selector

Quiz

The :lang() selector is used to select elements based on their language attribute. It specifically targets the lang attribute of HTML elements, which specifies the language of the element's content.

Syntax

Following is the syntax of :lang selector in jQuery −

$(":lang(language)")

Parameters

Here is the description of the above syntax −

The :lang specifies the language to match.
It can be a language code like "en" for English, "fr" for French, etc. This value can also be more specific, such as "en-US" for American English.
The value inside the :lang() selector is case-insensitive.

Example 1

In the following example, we are using the :lang() selector to select the paragraphs with the lang="en" attribute −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":lang(en)").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <p lang="en">This paragraph is in English.</p>
    <p lang="fr">Ce paragraphe est en franÃ§ais.</p>
    <p lang="en-US">This paragraph is in American English.</p>
</body>
</html>

After executing the above program, It selects the paragraphs with the lang="en" attribute and highlights them with yellow background color.

Example 2

In this example, we are selecting all the paragraphs with the lang="fr" attribute −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":lang(fr)").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <p lang="en">This paragraph is in English.</p>
    <p lang="fr">Ce paragraphe est en franÃ§ais.</p>
    <p lang="en-US">This paragraph is in American English.</p>
</body>
</html>

After executing, the :lang selects the paragraphs with the lang="fr" attribute and highlights them with yellow background color.

Example 3

This example selects the paragraphs with the lang="en" or lang="es" attributes −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":lang(en), :lang(es)").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <p lang="en">This paragraph is in English.</p>
    <p lang="fr">Ce paragraphe est en franÃ§ais.</p>
    <p lang="es">Este pÃ¡rrafo estÃ¡ en espaÃ±ol.</p>
    <p lang="de">Dieser Absatz ist auf Deutsch.</p>
</body>
</html>

After executing, the :lang selects the paragraphs with the lang="en" or lang="es" attributes and highlights them with yellow background color.

jquery_ref_selectors.htm

Print Page