I have a bunch of divs one after the other.
<div class="betweenable">some content</div>
<div class="betweenable">other content</div>
<div class="betweenable">yet another</div>
When I click the last div, I want to insert the text new content in a div before it, so the final result will be
<div class="betweenable">some content</div>
<div class="betweenable">other content</div>
<div class="betweenable">new content</div>
<div class="betweenable">yet another</div>
I tried append but it's adding the new markup inside the select div at the top. I want it inserted outside the selected div and right before it. What should I use instead of this line
var newmarkup = '<div class="betweenable">new content</div>';
$(this).prepend();
You can try this
$('.betweenable').click(function(){
var newmarkup = '<div class="betweenable">new content</div>';
$(this).before(newmarkup);
});
Here's an example : http://jsfiddle.net/jomanlk/C4XyH/
you can use .before here is DEMO
Related
I'm a wondering how I can get innerHTML of div when it contains a div element and a text. My code looks like this:
var outer = document.getElementById("outer").childNodes;
outer.forEach(function(e) {
console.log(e.innerHTML);
});
<div id="outer">
<div class="item">
<div class="icon"></div>
Hello
</div>
</div>
As you can see, innerHTML is getting the child div and the text, but I only want the text. Is it possible to make it without splitting or something?
I would put Hello in a separate container if you can.
var outer = document.getElementById("outer");
var firstItem = outer.children[0];
var text = firstItem.querySelector('.text').innerHTML;
console.log(text);
<div id="outer">
<div class="item">
<div class="icon"></div>
<span class="text">Hello</span>
</div>
</div>
That way you have more control over it if you want to add more content
I'm trying to create a drop down effect similar to this image: GIF, however with what I have so far: EXAMPLE I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks
HTML:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>
JS:
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
What I would try:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
</div>
Just put all your links in a single content div:
https://jsfiddle.net/sfcm95yz/3/
<div class="content">
<div class="item" onlclick="initContent('example')">
<em>Example Project</em>
</div>
<div class="item" onlclick="initContent('example2')">
<em>Example Project 2</em>
</div>
</div>
It's because you are sliding down the content div that is right after the header class element ($content = $(this).next();), which applies a display: block to it. If you add another content div, it isn't going to be right after that header and so won't be shown.
You can either change your JavaScript to target all content divs, or rearrange your HTML, something like this:
<div class="container">
<div class="header">Projects</div>
<div class="content">
<div onclick="initContent('example')">
<em>Example Project</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 2</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 3</em>
</div>
</div>
</div>
If you want to modify your JS and keep the existing markup, .nextAll() will select all of $header's siblings (.next() only selects one sibling). You can also add a selector argument to be sure you only select elements with the class "content".
$(".header").click(function() {
$header = $(this);
//getting the sibling ".content" elements
$content = $(this).nextAll(".content");
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
this is sample code explain what i want:
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
</div>
this code for jquery:
var $newDiv = $("<div/>")
.addClass("targetClass")
$(".someClass").append($newDiv);
result is add a TargetClass in div number 3 and repeat same class in first and second div.
question is how i add class in the last div and not repeat it in another div.
Judging by your code, you want new div as a sibling of your .someClass div rather than its child.
Simply replace this line
$(".someClass").append($newDiv);
by
$( "div[id]:not(:has(.targetClass))" ).append($newDiv); //will append new div to all those divs which doesn't have child element with targetclass
var $newDiv = $("<div/>").addClass("targetClass");
$( "div[id]:not(:has(.targetClass))" ).append($newDiv);
Demo
Using .last() will select the last element you are searching for.
jQuery(".someClass").last().append($newDiv);
If you mean to add div with targetClass to a div with someId if it donot exists, you can use the find() function:
if($('#someId').find('.someClass').length == 0) {
var $newDiv = $("<div/>")
.addClass("targetClass")
$("#someId").append($newDiv);
}
I suppose you have unique IDs for parent divs as someId is not valid if it is the actual ID applied on multiple elements, this makes the markup invalid.
Use .last().parent() to put the element as a sibling element as they share same parent:
var $newDiv = $("<div/>")
.addClass("targetClass").html('dynamic target element.')
$(".someClass").last().parent().append($newDiv);
div{border:solid 1px red; margin:10px 0 0 0;}
div div{border:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someId-1">
<div class="someClass">some</div>
<div class="targetClass">target</div>
</div>
<div id="someId-2">
<div class="someClass">some</div>
<div class="targetClass">target</div>
</div>
<div id="someId-3">
<div class="someClass">here after this elem should add</div>
</div>
I have 20 rows of DIVs. The initial state hides all spoilers and is like below (I show the first 3 rows here):
<div class="main" onClick="showHide()">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide()">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide()">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
etc..
CSS:
<style>
.main{background:silver;padding:1em;margin-bottom:1em}
.hide{display:none}
.show{display:block}
</style>
My goal is to manipulate/change the spoiler classes after user clicks on the "main" DIV. That is, after clicking on one of the "main" DIVs the "spoiler hide" class should automatically change to "spoiler show" so that the text is shown. And when user clicks on another "main" DIV, all 'spoiler show' classes should change to 'spoiler hide' and only the currently clicked "main" DIV should apply the 'spoiler show' class.
So it's basically like a toggle where only one (the last clicked) DIV shows the spoiler. I hope to find the simplest/fastest solution (JS in one line would work too).
I tried to use some JS function like below, but cannot make it work. I also read that 'document.querySelectorAll' might be used somehow.. I cannot use jQuery here.
<script>
function showHide() {
var e = document.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++) {
e[i].className ='spoiler show';
}
}
</script>
Try this:
<script>
function showHide(sender) {
var e = sender.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++)
{
e[i].className ='spoiler show';
}
}
</script>
<div class="main" onclick="showHide(this)">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide(this)">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide(this)">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
Working fiddle here: http://jsfiddle.net/t0shq84f/
I want to create clone of first two div of parent Div.
HTML Code
<div id="parent">
<div class="child"> <div class="child1>Content1...</div> </div>
<div class="child">Content2...</div>
<div class="child">Content3...</div>
<div class="child">Content4...</div>
<div class="child">Content5...</div>
<div class="child">Content6...</div>
</div>
Expected output
clone_object = '<div class="child"> <div class="child1>Content1...</div> </div>
<div class="child">Content2...</div>'
I tried below code but it will clone only first div of parent div.
clone_object = $("#parent").find("div:first").clone();
My question is how to clone first two div of parent div?
You need to use :lt selector.
Select all elements at an index less than index within the matched set.
$("#parent .child:lt(2)").clone();
or
$("#parent>div:lt(2)").clone();
Working Demo