Consider this scenario: an existing div with the class
<div class="two">TWO</div>.one should be added, wrapping the .two like so: <div class="one"><div class="two">TWO</div></div>$(".two").click(function(){
$(".one").wrap(this);
});.one{
padding:10px;
background-color:#ff0;
}<div class="two">TWO</div>Great effort! You were almost there, just a small tweak in the logic is needed. Remember to call wrap from the 'two' element instead of 'one' (the HTML content passed to the method):
$(".two").click(function() {
$(this).wrap("<div class='one'></div>");
});.one {
padding: 10px;
background-color: #ff0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="two">TWO</div>$(this).wrap( "<div class='single'></div>" );
If you have a div with the class one already present on your page, simply follow this code:
$(".two").click(function(){
$(this).wrap(".one");
});
If the div is not already on the page, you can use the following code instead:
$('.two').click(function(){
$(this).wrap('<div class="one"></div>');
});
For more information on jQuery's .wrap() function, check out this guide. This function accepts Selector, htmlString, Element, or jQuery as parameters. It can also accept a function as a parameter that returns an htmlString or jQuery while having access to the element it wraps around.
I am in need of 3 dynamic div containers. container for main content image display container that changes size container on the side with changing width The issue I am facing is that the text needs to be below the image container which has a wider width ...
There are multiple inquiries regarding executing a JavaScript function after content is loaded via Ajax. I am familiar with the common solution of running JS after Ajax load completion. If more than 40 pages are loading a page my-Page.php using Ajax, is t ...
Is it just me, or do my CSS tables not work on IE8? <div class="main-table"> <div class="row"> <a class="secondary-table" href="#"> <div class="secondary-row"> <div class="secondary-cell"> ...
I am currently working on creating a background pattern using only online images, and I need to adjust the spacing between them. Is there a way to specifically control the space between the images in the pattern using CSS? I know about the round and space ...
I need help with implementing a loading animation using the jQuery-steps plugin in my wizard type form. I want the animation to be displayed until the entire wizard has loaded completely, but I'm unsure of how to enable this feature as there is a labe ...
I want to design a single button that can control the bouncing motion of my div elements. The initial configuration will have the space divs arranged in a static, straight line. Once the button is clicked, the divs should start bouncing within their conta ...
I'm having issues with my css file and attempting to achieve the following: .login-wrapper { background-image: url({{imagePath}}); } Below is my component code: export class LoginComponent implements OnInit { imagePath: any = 'assets/discord ...
Within my erb file, there exists a script that looks like the following: function checkJquery() { if(window.jQuery) { jQuery(document).ready(function() { alert('onready'); $('div#habla_topbar_div').click(function( ...
I attempted to personalize my webpage by adding an image to a list, but I couldn't get the list-style image to work. You can view the page at Below is the code I used: CSS /* Fleet List */ ul#flotta li { list-style-image:url("http://ctp.serviziew ...
I have successfully resolved similar issues with diagonal gradients in the past. However, I am currently facing challenges with linear gradients. Previously, I was able to create a gradient with a cross pattern. background: linear-gradient(to right, tran ...
I'm wondering if there is a way to navigate back from an external page to a specific section on my one-page website with a fixed menu? On my one-pager website, I have a fixed menu that includes a "apply for a job" button. When clicked, it takes users ...
Currently, I am working with the Revolution Slider plugin on my Wordpress site. One of the features of Rev Slider is its API that allows for changing slides or listening for events. Beneath the slider wrapper, I am dynamically inserting a link to each slid ...
Attempting to replicate the design of a website by starting with the navigation bar. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="https: ...
I have 2 canvas layers stacked atop each other, but I need to position them relative to the entire page. The dimensions of both layers are fixed at a width of 800 and a height of 300. My goal is to center the canvas layers regardless of screen size, with ...
I am currently working on creating a responsive website with a background video feature. However, I am concerned about the amount of data it will consume on mobile devices. With Bootstrap, I can hide the video on small screens by using classes like hidde ...
I am currently developing a plugin for handling MySQL results with search filters and ordering options. I have been following tutorials to create this plugin and everything is working smoothly for simple queries with load more functionality, similar to You ...
Here is the markup I am working with: <table> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></ ...
I am working on a project where I have a full-width div with a background image containing people. I want to display a tooltip when hovering over each person, but I am facing challenges in aligning the divs properly. Image maps with % widths do not seem t ...
Is there a more efficient way to simplify this function? I am faced with multiple tweens that share similar ease properties. While I acknowledge the broad nature of this query, I have yet to discover a satisfactory solution. $('input').chan ...
While I am in the process of parsing a `json` object, I encountered an element labeled as `data-config`. Here's an example: var video = data.element.data-config; Every time I attempt to parse this specific element, an error pops up: ReferenceError ...