How to select all links inside the paragraph using jQuery ?

How to select all links inside the paragraph using jQuery ?

Last Updated : 06 Sep, 2021

In this article, we will see how to write code to select all links inside the paragraph using jQuery. To select all links inside paragraph element, we use parent descendant selector. This selector is used to selects every element that are descendant to a specific (parent) element.

Syntax:

$("parent descendant")

Approach: Here, we have created links and content inside paragraph element. After that, we use $("p a") selector to select all links inside paragraph element and changes its style using css() method.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        jQuery code to select all 
        links inside the paragraph
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <style>
        body {
            text-align: center;
            font-size: 30px;
        }
        
        button {
            background-color: green;
            color: white;
            border: none;
            font-size: 24px;
            border-radius: 5px;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }
        
        a {
            text-decoration: none;
        }
    </style>

    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p a").css({
                    color: "white",
                    background: "green"
                });
            });
        });
    </script>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <h3>
        jQuery code to select all 
        links inside the paragraph
    </h3>

    <p>
        <a href="#">GeeksforGeeks</a> is a 
        computer science <br>portal where 
        you can learn <a href="#">HTML</a>,
        <a href="#">CSS</a>, <br><a href="#">
        JavaScript</a>, etc.
    </p>

    <button>
        Click Here
    </button>
</body>

</html>

Output:

How to select all links inside the paragraph using jQuery ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to remove all paragraphs from the DOM using jQuery ?

To remove elements and content, we use jQuery remove() method which removes the selected element as well as everything inside it, also it will remove all bound events associated with that target element. Syntax: $(selector).remove() Example : HTML <!DOCTYPE html> <html> <head> <

How to append some text to all paragraphs using jQuery ?

In this article, we will append some text to all paragraph elements using jQuery. To append some text to all paragraph elements, we use append() and document.createTextNode() methods. jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).appen

How to insert some HTML after all paragraphs using jQuery ?

In this article, we will insert some HTML content after all paragraphs using jQuery. To add some content after all paragraph elements, we use the after() method. This method is used to insert the specified content after each selected element in the set of matched elements. Syntax: $( selector ).afte

How to insert an object before all paragraphs using jQuery ?

jQuery is a Javascript library to ease the task of web developers. Developers can use the Jquery library rather than using Javascript in their code. Jquery provides a lot of good features like DOM manipulation, event handling, AJAX support, etc. It is highly recommended to learn the basics of HTML,

How to select all on focus in input using JQuery?

The select() event is applied to an element using jQuery when the user makes a text selection inside an element or on focus the element. This event is limited to some fields. Syntax: $("selected element").select(); //Select all Input field on focus $("input").select(); //Select Input field on focus