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

CSS style for tables with inner gutters only

I am attempting to create a table layout with spacing between cells but without any external space for the cells at the border. I have written a simple code snippet to illustrate my issue: html, body, div, table, caption, tbody, tfoot, thead, tr, th, td ...

css

The POST request to the localhost API endpoint resulted in a 404 Not Found error

Whenever I try to send a POST request to "/api/auth/signup" in my JavaScript application, I keep getting a 404 Not Found error. My goal is to create a MERN application for a Modern Real Estate Marketplace. This is the code snippet causing the is ...

javascriptexpress

Issues with HTML text areas tags not being recognized after submitting a form occur specifically in Internet Explorer

I am encountering an issue with my form. I have a textarea field within the form, and on submit, I am trying to copy the content of a div containing a table into this textarea field. However, when I send this form and the email in IE, the values appear as ...

phpjqueryhtmlforms

"Trouble with Bootstrap 4 menu: only one dropdown opens at a time

I am facing an issue where the text remains a link and the dropdown toggle works, but it is causing Dropdown-2 to open when I click on Dropdown-1. Only Dropdown-1 seems to be working properly. I can't seem to figure out why only Dropdown-1 opens no m ...

htmljquerycsstwitter-bootstrap

The variable is unable to transfer successfully from JavaScript to PHP using ajax

I have a code that is designed to pass the values of all checked checkboxes to a PHP file in order to delete corresponding rows from a CSV file. The checkbox values are dynamic. <tr><td><span class="custom-checkbox"><input ty ...

javascriptphpajax

Optimal Placement of jQuery Event Handlers in React/Redux Components with Asynchronous Data Loading

After reviewing the ReactJS documentation, it's clear that the most suitable lifecycle method for handling redux action calls is componentDidMount. However, I'm facing a challenge when it comes to incorporating jQuery operations within this parti ...

javascriptjqueryreactjsredux

Encountering an issue: Module not found - 'cryptile' during express js installation

Just dipping my toes into the world of Node.js and I'm encountering some obstacles when trying to install Express.js. Seeking assistance in resolving this issue and successfully setting up Express.js. https://i.stack.imgur.com/PlHiB.png Interestingl ...

javascriptnode.jsexpress

Is .closest combined with :contains finding too many elements for my taste?

My goal is to highlight specific rows in a table that have a particular class assigned on $(document).ready. I attempted to use .closest with a tr to target individual rows, but instead it selects all rows and I'm unsure why. I've experimented w ...

jquery

A JavaScript async function with a nested call inside

Below is my node function for the API server: router.post('/find', async (req, res) => { try { const firewalls = []; let count = 0; const devices = await Device.find({ ...req.body }); devices.forEach(async (item) => { ...

javascriptnode.jsexpressasync-await

Outlook not adding padding to button in HTML email

https://i.stack.imgur.com/vMgGS.png Is there a way to apply the same padding to the border as seen on the button above? Adding the border directly to the td element seems like a solution, but it is not feasible due to the presence of border-radius in anot ...

htmlemailbuttonhtml-email

The OK Button Dialogbox is currently malfunctioning

While using jQuery for a dialog box, I encountered an issue when trying to delete an element within it. After clicking the ok button, the dialog box did not redirect or close itself properly. The initial content in the dialog box seems to work fine. < ...

c#jqueryhtmlasp.netjquery-ui-dialog

Iterate through each row asynchronously, waiting for each one to complete before moving on to the

Trying to navigate through multiple pages using puppeteer has been successful, except when attempting to parse through them at the same time. The issue seems to stem from the code executing async operations in rapid succession, overwhelming the browser. My ...

javascriptnode.jspuppeteer

Combining elements from a string array to create a hierarchical object in JavaScript

I need assistance with merging values from an array into a predefined nested object. Here is an example of the array with values, ['name=ABC XYZ', 'hobbies=[M,N,O,P]', 'profession=S', 'age=27'] The object that needs ...

javascriptarraysobjectnested-object

When attempting to swap out ":customimage:" with an image in a React.js HTML view, the result displayed is [object Object]

I have created a function below: WordColonsToImage(comment) { var newcomment = comment.replace(/:wave:\s*/g, <img src={wavinghand} />) return newcomment } Here is an example: WordColonsToImage("Hi! :wave:") whi ...

javascriptreactjs

Is it advisable to implement the modular pattern when creating a Node.js module?

These days, it's quite common to utilize the modular pattern when coding in JavaScript for web development. However, I've noticed that nodejs modules distributed on npm often do not follow this approach. Is there a specific reason why nodejs diff ...

javascriptnode.js

Utilizing Ember to transmit models to Bootstrap Popovers

Seeking assistance from anyone familiar with utilizing Bootstrap for Ember components to help resolve an issue. I am trying to understand how to pass a model to the component when using {{bs-bind-popover}} <div {{bs-bind-popover templPop}}>Show pop ...

javascripttwitter-bootstrapember.js

Why isn't the document.getElementById().value() function functioning properly within my PHP code?

When working on my PHP code, I included the following: <select class="ht__select" onchange="sorting('<?php echo $id ?>')" id="sorting"> <option value="">Default sorting</option> <option value="low_price">Sor ...

javascriptphphtml

Incorporate a course within the conditional statement

Currently, I'm working on the development of an input site and one of my goals is to highlight empty fields. My plan is to check if a field is empty using an if statement and then apply a specific class that will serve this purpose. This is the JavaS ...

javascriptjqueryhtmlcss

"Created a persistent fullscreen overlay over the body content, complete with scroll bars

Can a fixed fullscreen division position:fixed; width:100%; height:100%; cover the entire body of a page, including scroll bars? I understand that setting the body to overflow:hidden; can achieve this, but I am facing an issue where I want the fullscreen ...

htmlcss

Unable to load the Bootstrap CSS file from the specified import path: "bootstrap/dist/css/bootstrap.min.css"

I am currently working on a React application where I have a page that utilizes components from the react-bootstrap library. The issue I'm facing is related to styling, even though I have already imported the necessary bootstrap CSS file: import "boot ...

cssreactjscomputer-sciencereact-bootstrapvisual-web-developer