A guide to accessing the sibling of each selector with jQuery

Imagine you have the following HTML structure:

<div class="parent">
  <div class="child"></div>
  <div class="sibling">content...</div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="sibling">different content...</div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="sibling">different content...</div>
</div>

Is there a way to dynamically adjust each child's height to match its sibling's content height?

$('.child').css('height', '... next sibling height ...');
javascriptjqueryhtmlcss

Answer №1

Utilize the each function and apply the style to the current element (this) by using .next DOM's height 

$('.child').each(function() {
  $(this).css('height',$(this).next().height());
});
.sibling{
height:15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child"></div>
  <div class="sibling">content...</div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="sibling">different content...</div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="sibling" style="height:55px;">different content...</div>
</div>

Answer №2

Note:- siblings() allows you to retrieve the siblings of each element within a selected group, with the option to apply a filter using a selector

$('.child').each(function() {
  $(this).siblings().css({"background-color": "red", "height": "20px"});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">content...</div>
  <div class="sibling">content...</div>
</div>
<div class="parent">
  <div class="child">content...</div>
  <div class="sibling">different content...</div>
</div>
<div class="parent">
  <div class="child">content...</div>
  <div class="sibling">different content...</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to modify the title of a website upon entering the webpage and then updating it when moving to a new page?

I'm encountering an issue with changing the website title during two specific processes. Upon entering a webpage, the title is modified using the following code: <script type="text/javascript"> $(document).ready(function() { docum ...

javascripthtmljquery

Is there a way to identify if a user clicks on the scrollbar within my div element?

Is there a way to detect when someone mouses down on the scrollbar of a div element with scrollbars? ...

javascriptjquery

Issue with alignment on the printed version of an HTML document

While attempting to print an auto-generated HTML page through my Thermal POS printer, I encountered a large left margin issue. The application is developed using PyQt5, and I had to resort to a python script to generate the HTML code. Unfortunately, in the ...

htmlcssprintingpyqt5

What is the best way to use CSS in ReactJS to insert an image into a specific area or shape?

Currently, I'm working on developing a team picker tool specifically for Overwatch. The layout consists of cards arranged horizontally on a website, all appearing as blank gray placeholders. These cards are positioned using the JSX code snippet shown ...

javascripthtmlcssreactjs

My program is throwing an error due to invalid JSON format

Snippet of code: var data = $.parseJSON(data); Error message: Encountered Invalid JSON: {times: [{'9:30am','10:00am','10:30am','11:00am','11:30am','12:00pm','12:30pm','1:00pm&apo ...

javascriptajaxjson

Personalize the style of ordered lists

Greetings! I am attempting to customize the style of an ordered list like the one shown in the image on another website. However, instead of the circle used in that picture, I want to use a different CSS Image like the one (without text) shown here I&apo ...

csshtml-lists

The Javascript function will keep on executing long after it has been invoked

I am currently facing an issue with calling a JavaScript function within an AJAX call. The progress function below is supposed to be executed every time the for loop runs. However, the problem is that although progress is being run as many times as the for ...

javascriptajax

Having trouble uploading the file to Firebase storage

While attempting to upload files to Firebase using React, I encounter a perplexing issue. The file upload progress bar hits 100%, only to present me with an unfamiliar error message: { "error": { "code": 400, "message": "Bad Request. Could not c ...

javascriptreactjsfirebasefirebase-storage

If the variable is empty, use jQuery ajax to send a request with different data

Below is the code I have written: $(document).ready(function() { cookieanimalid =($.cookie("cookieanimal")); $.ajax({ type: 'POST', url: "/myurl/", data: {cookieanimalid}, success: function ( ...

javascriptjqueryajax

The one-time binding notation does not seem to be functioning as expected in AngularJS version 1.6.4

For our application, we are utilizing AngularJS 1.6.4 to display a large number of rows on a single page. However, when it reaches around 7K entries, the page starts hanging. To tackle this issue, we have opted for one-time binding for those specific pages ...

javascriptangularjs

The <a> tag does not lead to a different webpage and cannot be clicked on

I have developed a web component that includes a method to generate a copyright string: '<p>Copyright © 2020 John Doe<a href="https://www.example.com">. Terms of Use</a></p>' After creating the string, I conver ...

javascripthtmltypescriptweb-component

Using v-model in Vue with jQuery integration

I wrote a jQuery code that is executed when the mounted hook runs mounted() { this.$progress.finish(); var geocoder = new google.maps.Geocoder(); var marker = null; var map = null; function initialize() { var $latitude = document.getEl ...

javascriptjqueryvue.js

Allow Microsoft OAuth authentication for web applications only, restricting access to other Microsoft services

I am currently integrated Firebase into my website, allowing users to sign in using their Microsoft accounts through OAuth 2.0: import {getAuth, signInWithRedirect, OAuthProvider} from "firebase/auth"; (...) const provider = new OAuthProvider(& ...

javascriptfirebaseazureoauth-2.0active-directory

Creating a dynamic trio of graphs with HTML5, CSS3, and Vanilla JavaScript

I successfully created a tree graph using HTML5 and CSS3, but currently the nodes are static. I am looking to enhance the graph by making it dynamic. By dynamic, I mean that if the number of nodes increases or there are multiple children added, the graph ...

javascripthtmlcssjson

Angular List Selector: A versatile multiple selection component with a stylish list design

I'm in need of a select component similar to the one shown in https://i.sstatic.net/mo6NH.png The issue is that Material Angular doesn't have this specific component, so I opted to use the default HTML select inside my component. Everything was ...

htmlangularangular-material

Downloading and uploading images using AngularJS: A complete guide

I have developed an Angularjs 1.5.0 web application that needs to interact with a REST-based web service I created using dropwizard and jersey. The web service has been tested and is working perfectly. The method in the REST web service looks like this: ...

javascriptjqueryangularjsimage-uploadingimage-upload

Is it possible to pass parameters in the .env file in Node.js?

I am storing my file users.env inside routes/querys/users.env module.exports = { GET_USERS: "SELECT * FROM users", CREATE_USER: "INSERT INTO users ("id", "first_name", "last_name", "active") VALUES (NULL, '%PARAM1%', '%PARAM2%', & ...

javascriptnode.js

What is the best way to choose just the items with a distinct key from within this jQuery assortment?

[Object, Object, Object, prevObject: jQuery.fn.init[3], context: undefined] 0: Object 1: 1 2: 2 3: 7 __proto__: Object 1 : Object 1: 6 2: 2 3: 5 6: 15 __proto__: Object 2 : Object 1: 3 2: 2 3: 5 5: 7 ...

javascriptjquery

A lone slant positioned at the lower border of an object

Currently, I am working with two images stacked vertically. The dimensions of the top image are set at 100% width and 350px height, while the bottom image size is not a major concern. I am specifically interested in skewing the top image and maintaining a ...

htmlcss

Why do some button clicks not trigger a page refresh in JavaScript?

Hey there, I have a situation where I have two buttons - one to add a dog to the dog list and another to clear the entire list. Both buttons are functioning properly, but I'm having an issue with only the OnSubmit button refreshing the page. The dog ...

javascriptjquery