There are several divs on the page with class "wrap-me".
I want add an element "add-me" after "wrap-me", and doubly wrap the two in a "wrapper-inner" and "wrapper".
Basically - it should look like this:
<div class="wrapper">
<div class="wrapper-inner">
<div class="wrap-me"></div>
<div class="add-me"></div>
</div>
</div>
This is my implementation:
const $addMe = $("<div>", { class: "add-me" });
const $wrapper = $('<div>', { class: "wrapper" });
const $wrapperInner = $('<div>', { class: "wrapper-inner" });
$.each($(".wrap-me"), (i, wrapMe) => {
const $wrapMe = $(wrapMe);
$wrapMe.wrap($wrapper).wrap($wrapperInner);
$addMe.insertAfter($wrapMe);
});
Here's the output:
<div class="wrapper">
<div class="wrapper-inner">
<div class="wrap-me"></div>
</div>
</div>
It's almost there, the only thing is that the "add-me" is not getting inserted into the DOM. What's wrong?
//get the template
var wrapperTemplate = $('#wrapperTemplate').text();
$('.wrap-me').each(function(index, element){
//create a new element to put in the DOM
var $wrapper = $(wrapperTemplate);
//put the wrapper after the element we are going to replace
$wrapper.insertAfter(element);
//move the element into the wrapper where it should be
$wrapper.find('.wrapper-inner').prepend(element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap-me">A</div>
<div class="wrap-me">B</div>
<div class="wrap-me">C</div>
<div class="wrap-me">D</div>
<!-- HTML template for what we want to add, so it's not in the javascript -->
<script type="text/html" id="wrapperTemplate">
<div class="wrapper">
<div class="wrapper-inner">
<div class="add-me"></div>
</div>
</div>
</script>
Related
I have a div group inside some that I want to have a class for every div that doesn't have a specific element like h1
For Example :
<div class="container">
<div class="parents">
<h1>AAAA</h1>
<div class="content">
<p>Hello</p>
</div>
</div>
</div>
I want to check each div inside some of it and get all the class that does not contain h1 and the result is like
class = 'content'
I'm trying my javascript code via parseFromString because the html code is taken out from string
var My_HTML = `
<div class="container">
<div class="parents">
<h1>AAAA</h1>
<div class="content">
<p>Hello</p>
</div>
</div>
</div>
`;
var parser = new DOMParser();
var doc = parser.parseFromString(My_HTML, "text/html");
var output = doc.querySelectorAll("div:not('div > h1')");
Step 1: Get all div elements.
Step 2: Filter the collection, keeping those that do not have an h1 descendant.
Step 3: For each matching element, map the element to its className property.
Step 4: There is no step 4.
[...document.querySelectorAll('div')].filter(d => !d.querySelector('h1')).map(d => d.className)
const My_HTML = `
<div class="container">
<div class="parents">
<h1>AAAA</h1>
<div class="content">
<p>Hello</p>
</div>
</div>
</div>
`;
const parser = new DOMParser();
const doc = parser.parseFromString(My_HTML, "text/html");
const everyDiv= [...doc.querySelectorAll('div')].filter(d => !d.querySelector('h1')).map(d => d.className);
console.log(everyDiv)
Consider the following.
$(function() {
$(".container *").each(function(i, el) {
console.log("Check Elements", $(el).prop("nodeName"), $(el).attr("class"));
if (!$(el).is("h1")) {
console.log("Class: " + $(el).attr("class"));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="parents">
<h1>AAAA</h1>
<div class="content">
<p>Hello</p>
</div>
</div>
</div>
This itereates each of the elements within .container; only looking for a Class if it is not an <h1> element.
You could also use the :not() selector.
$(function() {
$(".container *:not(h1)").each(function(i, el) {
console.log("Check Elements", $(el).prop("nodeName"), $(el).attr("class"));
});
});
This will select the child elements that are not H1.
Hello I have this html code:
<div class="row newrow">
<div class="col-10"><b>this</b></div>
<div class="col-2">
<img src="close.png" id="exit"/>
</div>
</div>
When I click on img with id exit using this code
$('body').on('click','#exit',function(e){
})
I need to get the text of the <b>behind it which would be "this"
I have tried this but it does not work:
$('body').on('click','#exit',function(e){
$q = $(e.target).prev('b')
var word = $q.text()
)}
It only gives me the that I clicked from the beginning
try this:
$('body').on('click','#exit',function(e){
var this_b = $(this).parent().prev().children(0).html();// get the text
alert(this_b);
});
You can use $(this).closest('.row').find('b'):
$('#exit').click(function(e){
$q = $(this).closest('.row').find('b');
var word = $q.text();
console.log(word);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row newrow">
<div class="col-10"><b>this</b></div>
<div class="col-2">
<img src="close.png" id="exit"/>
</div>
</div>
You need to select the parent of the clicked img to get the the .col-2, and then get the col-2's prev() to get to the .col-10, and then you can access its children() to get the children (the single <b>). Also, there's no need for e.target if you use this:
$('body').on('click', '#exit', function() {
$q = $(this).parent().prev().children();
var word = $q.text()
console.log(word);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row newrow">
<div class="col-10"><b>this</b></div>
<div class="col-2">
<img src="close.png" id="exit" />
</div>
</div>
Try this
$('body').on('click','#exit',function(e){
var word = $(this).closest('.newrow').find('b').text();
});
Hullo, I am wondering how I can add a new link around/to an element, using only JavaScript? I am new to JavaScript, and I am sorry if this question seems stupid or too easy.
Current:
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
</div>
Desired Code:
<div class="container">
<div class="content1"></div>
<a href="http://example.com">
<div class="content2"></div>
</a>
</div>
Just use normal DOM manipulation, nothing tricky required
const container = document.querySelector('.container');
const a = container.appendChild(document.createElement('a'));
a.href = "http://example.com";
a.appendChild(document.querySelector('.content2'));
console.log(container.innerHTML);
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
</div>
Can use jQuery wrap()
$('.content2').wrap('<a href="http://example.com">')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content1">content 1</div>
<div class="content2">content 2</div>
</div>
Create a new a element and create a child in that element with the same content in your div and append the a element in the parent of the old div('.container')
var content2 = document.getElementsByClassName('content2')[0];
var container = content2.parentNode;
var a = document.createElement('a');
a.setAttribute("href", "www.google.com");
container.replaceChild(a, content2);
a.appendChild(content2);
<div class="container">
<div class="content1">Content1</div>
<div class="content2">Content2</div>
</div>
Using only pure Javascript, you can do something like this:
1. get your div by class (you can do using getElementById if you define an id for your div)
var mydiv = document.getElementsByClassName('content1');
2. create your anchor and set an href
var new_anchor = document.createElement("a");
new_anchor.href = "http://example.com";
3. Place the div content1 inside new anchor
new_anchor.append(mydiv[0]);
4. Place your entire element inside the container again
var mycontainer = document.getElementsByClassName('container');
mycontainer[0].insertBefore(new_anchor, mycontainer[0].childNodes[0])
I'm stuck with a menu I'd love to add to my website.
I have branched my work in:
Commercial
Fashion
Music
Portrait
So I have a menu like this one above.
When I click on one section, let's say "Commercial" I want all the others to be display:none.
Have a look at this FIDDLE: http://jsfiddle.net/bfevLsj2/8/
$(document).ready(function() {
$("#commercial").click(function() {
$(".commercial").toggleClass("show");
$(".fashion").toggleClass("hid");
$(".music").toggleClass("hid");
$(".portrait").toggleClass("hid");
});
});
You need siblings() width jquery
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
$("[id]").click(function(){ //onclick on element with ID
var selected = $(this).attr("id"); // save the value of that ID
$("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial">Commercial</div>
<div id="fashion">Fashion</div>
<div id="music">Music</div>
<div id="portrait">Portrait</div><br />
<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>
BUT a better approach would be to use data-*
$("[data-tab]").click(function(){
var current = $(this).attr("data-tab");
$("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
AGAIN it is better to use pure javascript
function runClick (event) {
var current = this.getAttribute("data-tab");
for( var content = 0; content < dataContent.length; content++) {
dataContent[content].style.display = "none"
}
document.querySelector("[data-content="+ current + "]").style.display = "block"
}
var dataTabs = document.querySelectorAll("div[data-tab]"),
dataContent = document.querySelectorAll("div[data-content]");
for(var tab = 0; tab < dataTabs.length; tab++){
dataTabs[tab].addEventListener("click", runClick , false);
}
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
HTML:
<div id="commercial" class="menuItem">Commercial</div>
<div id="fashion" class="menuItem">Fashion</div>
<div id="music" class="menuItem">Music</div>
<div id="portrait" class="menuItem">Portrait</div><br />
<div class="commercial content">C</div>
<div class="fashion content">F</div>
<div class="music content">M</div>
<div class="portrait content">P</div>
JavaScript:
$(document).ready(function(){
$(".menuItem").click(function(){
var id = this.id;
$('.content').removeClass('show').addClass('hid');
$('.'+id).addClass('show').removeClass('hid');
});
});
CSS:
.hid {
display:none;
}
.show {
display:block;
}
Fiddle
Have a look at this fiddle, think it's what you want
Essentially you can use .toggle() to traverse and show/hide according to whether it's the one you want to show.
$(function(){
// find all the links that you can click
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId));
});
});
});
And the HTML:
<div id="commercial" class="clickable">Commercial</div>
<div id="fashion" class="clickable">Fashion</div>
<div id="music" class="clickable">Music</div>
<div id="portrait" class="clickable">Portrait</div>
<br />
<div class="commercial section">C</div>
<div class="fashion section">F</div>
<div class="music section">M</div>
<div class="portrait section">P</div>
HTH
Edited to add an "ALL" link in this fiddle
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL");
});
});
After adding this to the list of clickable divs:
<div id="ALL" class="clickable">
ALL
</div>
Your could that more easy like:
<div class="link" id="commercial">Commercial</div>
<div class="link" id="fashion">Fashion</div>
<div class="link" id="music">Music</div>
<div class="link" id="portrait">Portrait</div><br />
<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var id = $(this).attr('id');
$('.elem').hide();
$('.' + id).show();
});
});
</script>
Here is what I trying to do:
When I type into the input field I want the top level div.container-fluid to change colors. Right now I can only get the .xdiv area to change but not any divs that are higher than that.
Here is my code:
<script>
$(function () {
$('input[type="text"]').keypress(function () {
var $this = $(this),
$div = $(this).parent();
if ($this.val().length > 0) {
$div.addClass("hasContent");
} else {
$div.removeClass("hasContent");
}
});
});
</script>
<style>
.container-fluid.hasContent { background-color: red }
</style>
<div class="container-fluid linear-Algebra" id="{{id}}">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span8 grid-layout">
<legend>Grid Layout:</legend>
<div class="span4">
<div class="xdiv">
<label>x:</label>
</div>
</div>
<div class="span4 offset1">
<div class="ydiv">
<label>y:</label>
</div>
</div>
</div>
<div class="span3">
<legend>Options:</legend>
<div class="btngroup">
<label class="checkbox" class="cbl">
</label>
</div>
<label>Actions:</label>
<div class="btngroup">
</div>
</div>
</div>
</div>
</div>
</div>
DEMO
CHANGE THIS
$div = $(this).parent();
TO
$div = $(this).parents('.container-fluid');
parents('.container-fluid') find the parent with class container-fluid
Change this:
$div = $(this).parent();
to this:
$div = $('.container-fluid')[0];
Also, where is your input element?
You can use jQuery.closest -
var containerDiv = $(this).closest('.container-fluid');
From jquery closest page (http://goo.gl/tHBRx) -
Description: For each element in the set, get the first element that
matches the selector by testing the element itself and traversing up
through its ancestors in the DOM tree.