This article explains how to use jQuery’s click() method to execute processes on all specified tag elements. In this example, we’ll use toggleClass() on the specified li tags to dynamically change the text size and weight by adding or removing a class. This technique is useful for manipulating specific elements on websites or applications.
Execute Processes on All Tag Elements Using click() – CSS Description
First, define CSS for the clickable area (.clk) and the target li tags for changing text size and weight. The following CSS defines the styles for the clickable area and the list. Customize as needed.
<style type="text/css">
body {
font-family: Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", Osaka, "ＭＳ Ｐゴシック", Arial, sans-serif;
padding: 0;
margin: 0;
overflow-x: hidden;
line-height: 1.8em;
text-align: center;
}
h1 {
font-size: 26px;
text-align: center;
font-weight: normal;
padding: 10px 0 20px 0;
line-height: 1.2em;
}
.clk {
width: 150px;
height: 30px;
cursor: pointer;
background-color: #cccccc;
color: #ffffff;
text-align: center;
line-height: 28px;
font-size: 18px;
font-weight: bold;
margin: 0 auto;
}
ul {
width: 150px;
margin: 40px auto 0 auto;
}
ul li {
font-weight: bold;
margin-bottom: 4px;
}
.addtxt {
font-size: 40px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
This CSS applies styles to the body, h1, and the clickable area .clk. Specifically, li tags have font-weight: bold;, and when the addtxt class is added, the text size and weight change.
Execute Processes on All Tag Elements Using click() – HTML Description
Next, prepare the clickable area and the list (li tags) in HTML. Here, there are five list items, but you can freely change the number or content of the list as needed.
<h1>Click the following to use each to add the class addtxt to all specified li tags with toggleClass and change the text size and weight for all li tags.</h1>
<div class="clk">Click</div>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
This HTML creates a clickable area with the .clk class and displays five li tags as a list. This prepares for executing processes on all li tags.
Execute Processes on All Tag Elements Using click() – JavaScript Description
First, load the jquery-2.2.0.min.js file. In JavaScript, use jQuery’s click() method and each() method to add or remove a class for all li tags when clicked.
<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".clk").click(function () {
$("li").each(function () {
$(this).toggleClass("addtxt");
});
});
});
</script>
The above script runs when the document is ready. When the .clk class is clicked, the toggleClass("addtxt") is applied to all li tags, changing their text size and weight.
[each] Demo Page for Executing Processes on All Specified Tag Elements
Check out the demo page below to see how this code works.
In this demo, you can see how the list items expand and revert each time you click. Observe the behavior and deepen your understanding of the code.
Conclusion
This article explained how to use jQuery’s click() and each() methods to execute processes on all tag elements. By using toggleClass(), you can dynamically change the appearance and style by adding or removing a class with each click. This allows for the creation of interactive websites and applications.
By applying this method, you can execute similar processes on other tags or attributes. For example, you can change the style of all specified div tags or add specific classes to form input fields.
Leverage this knowledge to enhance your web development skills further. In the next article, we will introduce more advanced techniques by combining other jQuery methods.
※ Use at your own risk.
Do not copy Google Analytics tags from the demo page’s <head> section.
