Using jQuery, wrap two specific HTML elements together

I am working with a set of elements:

<div id="one">ONE</div>
<div id="two">TWO</div>
<div id="three">THREE</div>
<div id="four">FOUR</div>
<div id="five">FIVE</div>

My goal is to wrap a DIV tag around the elements with IDs "two" and "three" in order to achieve this structure:

<div id="one">ONE</div>
<div class="wrapped">
    <div id="two">TWO</div>
    <div id="three">THREE</div>
</div>
<div id="four">FOUR</div>
<div id="five">FIVE</div>

Although the "wrapAll" function can only target elements with the same class, like so:

$(document).ready(function(){
    $( "div" ).wrapAll( "<div class='wrapped' />");
});

I am hoping for a more elegant solution rather than having to assign the same class to the two DIVs before wrapping them using jQuery.

Answer №1

To achieve this, simply use the code snippet:

$('span#two, span#three').wrapAll('<div class="wrapper" />')

Example on jsbin

Answer №2

To select the two elements you desire, simply utilize the wrapAll() method.

According to the documentation (emphasis added by me):

The .wrapAll() function allows for any string or object that would typically be used with the $() function to define a DOM structure. This structure can be nested multiple levels deep, but should consist of only one innermost element. This structure will surround all the elements in the matched set of elements as a unified group.

Here is a link to the demonstration: https://jsfiddle.net/93dyokr0/1/

$('#two, #three').wrapAll( "<div class='wrapped' />");

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

What could be causing my insertRow function to inject empty cells into my table?

I am facing an issue with adding the results of a fetch request into a table as a new row. Strangely, when I click the button to trigger this function for the first time, it adds an empty row instead of the desired data. However, on subsequent clicks, the ...

Tips for modifying CSS when a user scrolls beyond a specific div

Currently, I am working on implementing a scroll function that dynamically moves elements based on the user's scrolling behavior. The code I have written works to some extent and successfully moves the elements. However, my goal is to create a list o ...

CSS: Hover below the designated target to reveal an expanding dropdown menu

My initial solution involved toggling the visibility on and off when hovering. However, this approach is not optimal as the menu should smoothly transition into view. When the visibility is toggled, the user does not experience the intended transition effe ...

What is the best way to initiate an AJAX request and retrieve the requested data?

How do I set up my ajax function? $(function() { $("form#new_user").click(function(e) { e.preventDefault(); var dataString = $('#new_user').serialize(); $.ajax({ type: 'POST', url: '/user', da ...

I'm looking to properly position my logo, header, and paragraph within the jumbotron using Dash Bootstrap

While working with Dash in Python, I encountered an issue trying to align the logo header and paragraph horizontally within a jumbotron. Here is what I was seeing: https://i.sstatic.net/ZNTAr.png However, my aim was to achieve a design similar to the imag ...

How can we have a div stay at the top of the screen when scrolling down, but return to its original position when scrolling back up?

By utilizing this code, a div with position: absolute (top: 46px) on a page will become fixed to the top of the page (top: 0px) once the user scrolls to a certain point (the distance from the div to the top of the page). $(window).scroll(function (e) { ...

Tips on resolving issues with form input that is not accepting input on a Mobile device

As a newbie in HTML and CSS, I attempted to design a form with various fields. While the fields work perfectly on larger screens, they do not allow input on smaller screens (mobile devices). I used the Firefox inspect tool to troubleshoot the issue, but c ...

Issue with PrimeNG Carousel width on mobile devices

Currently, I am in the process of developing a system interface with Angular and PrimeNG specifically for mobile devices. The main requirement is to have a carousel to display a set of cards. After evaluating different options, I decided to utilize the ngP ...

How to refresh a div in a dynamic Bootstrap modal using jQuery?

I am attempting to update a specific DIV element within a bootstrap modal by using a button with a Load Function from JQuery. However, when I click the button, the DIV remains hidden. More specifically, my aim is to incorporate a comment box within this m ...

Is there a way to horizontally align text in a div using center alignment?

Excuse me for what might seem like a silly question, but I am having trouble figuring this out. Edit: All I want is to horizontally center the text without affecting the image's position. The image should stay aligned with the baseline of the text. ...

Creating functional dropdown menus with popperjs in the latest Bootstrap version 5

Currently, I am attempting to implement dropdown menus in Bootstrap 5. According to my research, this feature requires Popper.js integration, but I am uncertain of the correct way to include it in my Laravel project that utilizes Laravel Mix. I have made ...

Tips on making a dropdown select menu expand in a downward direction

I'm currently using a select element to choose options from a dropdown list, but because of the large number of items, the list displays in an upward direction instead of downwards. I am working with Bootstrap. I have reviewed other code samples with ...

Button group malfunctions on smaller screens

After integrating a button group into my new website, I noticed that the first two buttons stop functioning properly on smaller screens. Surprisingly, if I remove the text-center div, all buttons cease to work entirely. Despite attempting various solution ...

PHP Error: Function call to member unsuccessful

I'm currently experimenting with a tutorial that explains how to populate a Select2 drop down using data from a MySQL Database: Below is the PHP script I've slightly modified for this task: <?php // setting up the database connection ...

Ways to retrieve information from a different website's URL?

Having a bit of an issue here. I'm currently browsing through some reports on webpage #1 () and I have a specific requirement to extract the object named "data" from webpage #2 (). However, the code I've used seems to fetch the entire webpage ins ...

Python script for launching a .html file and automating the process of clicking the submit button

I am currently working with a .html file where I need to send a value using a submit button. Here is how the code looks: <HTML> <HEAD> <TITLE>ABC Corporation</TITLE> </HEAD> <BODY> <FORM ACTION="http://192.168.2.2/cg ...

Whenever the page is refreshed, the vertical menu bar with an accordion feature hides the sub

I have designed a vertical accordion menu bar following the example at http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol However, I am encountering an issue where clicking on a button to display a submenu causes the page to refr ...

Tips for positioning a hero image perfectly using HTML and CSS

I am looking to display two hero images on the index page and wondering how to align them. My goal is to have both images centered with 50px separation under the header, ensuring they are of equal height. Will using the flex property work for hero images? ...

What is the best way to automatically collapse the Bootstrap navbar on smaller devices after selecting a menu item?

Here is the code I've implemented for executing the task. It functions correctly when resizing the window on a computer but does not work on mobile devices. $('.nav li a').on('click',function(){ $('.navbar-collapse') ...

JavaScript and modifying the attributes of the nth child

I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item usi ...