JavaScript

How to efficiently manipulate sibling elements with the jQuery siblings() method

 

In the world of web development, dynamic control of page elements is essential to provide users with a comfortable browsing experience.
This time, we will introduce how to easily manipulate the sibling elements of a specific element using the siblings() method, one of the features of jQuery.

Change the CSS of all sibling tag elements of the specified tag element.

Contents
  1. Introduction: What is jQuery?
  2. The magic of the siblings() method
  3. How to use it in practice
  4. [siblings] Demo page to change the CSS of all sibling tag elements of the specified tag element
  5. Conclusion

Introduction: What is jQuery?

jQuery is a library designed to make JavaScript easier to handle. It is loved by developers worldwide because it allows complex scripts to be implemented with just a few lines of code.

The magic of the siblings() method

The siblings() method is a jQuery feature that selects all sibling elements of the specified element. This allows you to make batch changes to CSS or apply events to sibling elements.

How to use it in practice

Setting up basic styles with CSS

First, define the basic styles applied to HTML elements using CSS. Here, we will perform basic styling, such as setting the font family, margin, and padding.

<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:30px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  position: relative;
}
ul,ol{
  width: 300px;
  margin: 0 auto;
}
ul li,ol li{
  font-weight: bold;
  margin-bottom: 4px;
}
</style>

Defining the structure with HTML

Next, create the HTML structure to be manipulated. Write the HTML according to how you want to change the sibling elements of the tag with class=”crnt”.

<h1>Change the text color and background color of all sibling tag elements of the tag with class="crnt"</h1>

<ul>
  <li>Eldest son</li>
  <li class="crnt">Second son</li>
  <li>Third son</li>
  <li>Fourth son</li>
</ul>

<br>

<ol>
  <li>Eldest daughter</li>
  <li>Second daughter</li>
  <li>Third daughter</li>
  <li class="crnt">Fourth daughter</li>
</ol>

Dynamically manipulate with jQuery

Finally, use jQuery to change the color and background color of the sibling elements of the element with class=”crnt”.
First, load the jquery-2.2.0.min.js file. By writing it inside $(document).ready(function(){…});, this operation will automatically execute once the page has finished loading.
$(“specified tag”).siblings() changes the text color and background color of the sibling tag elements of the specified class=”crnt” tag.

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".crnt").siblings().css({'color':'#006DD9','background-color':'#cccccc'});
});
</script>

[siblings] Demo page to change the CSS of all sibling tag elements of the specified tag element

Not only theory, but by actually seeing the demo in action, you can experience the siblings() method.
Access the demo page from the link below and check the actual behavior.

[siblings] Demo to change the CSS of all sibling tag elements of the specified tag element

Conclusion

By using the jQuery siblings() method, you can efficiently and easily apply style changes or events to the sibling elements of a specified element. Mastering this technique will allow you to create richer and more interactive web pages.

　
※ If you use this content, please do so at your own risk.
　Do not reuse the Google Analytics tags in the head tag of the demo page.

siblings()
RELATED POST