Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find all inputs with a value Green and change the text of next sibling span using jQuery?
Overview
Using Jquery we can create this feature, as Jquery library provides the methods for changing the span text to the value of the input value. In this feature we should have a prior knowledge of the basic HTML and the Jquery. So the Jquery provides the methods as next() and text(), these two methods play a vital role in building this feature. We will also use a few styling methods to make the change visible from other normal text.
Syntax
The Syntax used in this feature is −
$(selector).next().text("text");
selector − The selector in the above Syntax is termed as the input value of green as input[value="green"].
next() − The next() method is termed as a Jquery method which is used to get the next sibling of the current element.
text() − The text() method is used to set the text to the selected element.
Algorithm
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to it.
Step 2 − Now add the Jquery CDN link to the head tag of the file.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
Step 3 − Now create a parent container which contains the input tag with the value attribute.
Step 4 − Create three input types of radio with the value yellow as an attribute value.
<div> <input type="radio" value="yellow"> </div> <div> <input type="radio" value="yellow"> </div> <div> <input type="radio" value="green"> </div>
Step 5 − Also add the span tag just after the input tag is created with any value.
<div> <input type="radio" value="yellow"><span>value1</span> </div> <div> <input type="radio" value="yellow"><span>value2</span> </div> <div> <input type="radio" value="green"><span>value3</span> </div>
Step 6 − Now create a button as "Check Now" to change the span text value.
<button>Check Now</button>
Step 7 − Now add a script tag to the body element.
<script></script>
Step 8 − Now select the button as a selector to trigger the span text change function.
$("button").click(() => {});
Step 9 − Now select the input tag as a selector with the value type equals to green.
$('input[value="green"]').next().text("Green");
$('input[value="green"]').next().css({
"backgroundColor": "green",
"color": "white", "padding": "0.2 0.5rem"
});
Step 10 − As the user will click the color and text will change.
Example
In this Example we will build a simple radio button using the input tag of type radio and will also add the value attribute to those input tags as "yellow" and "green". As we had to change the text of the next span so we will be creating a few span tags just after the input tags created.
<html>
<head>
<title> change the text of next span</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
</head>
<body>
<h3> Span will change to green on clicking button</h3>
<div style="display: flex;flex-direction: column;">
<div>
<input type="radio" value="yellow"><span>value1</span>
</div>
<div>
<input type="radio" value="yellow"><span>value2</span>
</div>
<div>
<input type="radio" value="green"><span>value3</span>
</div>
<button style="width: 10rem;margin-top: 0.8rem;">Check Now</button>
</div>
<script>
$("button").click(() => {
$('input[value="green"]').next().text("Green");
$('input[value="green"]').next().css({
"backgroundColor": "green",
"color": "white", "padding": "0.2 0.5rem"
});
})
</script>
</body>
</html>
The given below image shows the Output for the above Example which shows the three radio type input buttons, with the some span text as "value1", "value2" and "value3". These three radio buttons are assigned with an attribute so when a user clicks on the check now button the input type radio which contains the value as green will be changed as you can see in the second image. It shows the change in value of the third radio button with a green background.
Conclusion
The above feature can be helpful in creating a web application such as quiz application or for any other type of data manipulation. This type of features can also be used in building some strategic games. To get the result as above you should always check the selector before the next() method because it will only select the value which you have mentioned.
55 Views
