❮❮ PREV NEXT ❯❯

SELECTORS - attribute$=value Selector

The 'attribute$=value Selector' is used to select the elements, that matches an attribute that ends with a particular value.

Say, for example, <p>, <div>, <h1> e.t.c. are called elements in HTML.

And the <p> or <div> element can have a 'class' or 'id'.

<p class = "para1"> First Paragraph </p>

These 'class' or 'id' are called as attribute in HTML.

Let us learn more with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    
    	<p class = "Para1"> First Paragraph </p>
    	<p class = "newPara"> Next Paragraph </p>
   		<p id = "nextPara"> New Next Paragraph </p>
    	
    	<button> Click me </button>

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('[class $= "Para"]').text("The contents of the elements with class that ends with para got changed")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three <p> elements, where the first two <p> elements has a 'class' attribute.

<p class = "para1"> First Paragraph </p>
<p class = "newPara"> Next Paragraph </p>

And the third <p> element has an 'id' attribute in it.

<p id = "nextPara"> New Next Paragraph </p>

And we only want to change the contents of those elements that has a class attribute and the class name that ends with 'Para'.

And as we can see only,

<p class = "newPara"> Next Paragraph </p>

Ends with class name 'Para'.

Also,

<p id = "nextPara"> New Next Paragraph </p>

Ends with 'Para', but it has an 'id' attribute and not a 'class' attribute.

And the contents of,

<p class = "newPara"> Next Paragraph </p>

Gets changed.

And this happened with the '[class $= "Para"]' element selector.

$('button').click( function() {
	$('[class $= "Para"]').text("The contents of the elements with class that ends with para got changed")
});

The moment the button is clicked, JQuery statement gets triggered.

$('[class $= "Para"]').text("The contents of the elements with class that ends with para got changed")

And the JQuery code locates the elements with class name that ends with 'Para'.

And changes the contents of,

<p class = "newPara"> Next Paragraph </p>

❮❮ PREV NEXT ❯❯