I am trying to find the DIV within another DIV id.
<div id="container1">
<div class="inside">
</div>
</div>
<div id="container2">
<div class="inside">
</div>
</div>
Notice there are 2 DIVs with the class "inside". I am trying to select the one within a specific container.
When there is only 1 set of containers, this works:
$carousel_container = $(carousel).find(".inside");
However, when I define the parent ID, then try to select the inside div, it does not work:
$carousel_container = $(carousel).find("#" + o.theid + " .inside"); // where o.theid = container1 or container2
Try
$(carousel).find("#" + o.theid + " > .inside");
Where > means child of.
Have you tried:
$carousel_container = $(carousel).find("#" + o.theid).children('.inside');
Related
so i have a javascript code and i want to print it inside different div's.
example:
<div class='block output-1'>...</div>
<div class='block output-2'>...</div>
<div class='block output-3'>...</div>
and i want to replace every div containers that have .block class with the below <script> code
<script>document.write('text');</script>
i tried by Jquery and i could make it : http://jsbin.com/yokipajiho/1/edit?html,js,output
but i hope if there is any better or different way to do it.
Don't use document.write, assign to the innerHTML property of the DIVs.
document.querySelectorAll(".block").forEach((div, index) => div.innerHTML = "text " + index);
<div class='block output-1'>...</div>
<div class='block output-2'>...</div>
<div class='block output-3'>...</div>
I'm writing a HTML code where there are 3 divs - and in the mainDiv2, there is this another div that is hidden. When I click on the mainDiv2, I want to unhide the hiddenDiv(this I'm able to do it). As well as I want this hiddenDiv to be shown in mainDiv1 as a child.
Here is my code.
<div class="mainDiv1">
This si a main div content
</div>
<div class="mainDiv2" onclick="showhiddenDiv()">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>
JS
function showhiddenDiv(){
document.getElementById('hiddenDiv').style.display="block";
}
please let me know how can I do this.
Here is a working fiddle. https://jsfiddle.net/8pj3uvfn/1/
Thanks
You can use appendChild like below
function showhiddenDiv() {
var hiddenDiv = document.getElementById('hiddenDiv');
var mainDiv1 = document.getElementsByClassName('mainDiv1')[0];
hiddenDiv.style.display = "block"
mainDiv1.appendChild(hiddenDiv)
}
<div class="mainDiv1" id="mainDiv1">
This is a main div content
</div>
<div class="mainDiv2" onclick="showhiddenDiv()">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>
As well as I want this hiddenDiv to be shown in mainDiv1 as a child.
You need to clone the hiddenDiv and put it in mainDiv1.
So modify your method as
function showhiddenDiv(){
var hiddenNode = document.getElementById('hiddenDiv');
hiddenNode.style.display="block";
var copyHiddenNode = hiddenNode.cloneNode( true );
copyHiddenNode.id += "_1"; //change the id so that ids are not duplicated
document.getElementById("mainDiv1").appendChild( copyHiddenNode );
}
You could use appendChild
function showhiddenDiv(){
var hiddenDiv = document.getElementById('hiddenDiv');
document.getElementsByClassName('mainDiv1')[0].appendChild(hiddenDiv);
hiddenDiv.style.display="block";
}
Demo
Assuming that you have set the id attributes of the divs properly,
function showhiddenDiv(){
var hiddenDiv = document.getElementById('hiddenDiv'); //Get the reference
document.getElementById('mainDiv1').appendChild(hiddenDiv) //Chenge the DOM order (you don't have to clone)
hiddenDiv.style.display="block"; //Unhide
}
<div class="mainDiv1">
This si a main div content
</div>
<div class="mainDiv2" onclick="document.getElementById('hiddenDiv').style.display = 'block'">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>
Given this HTML:
index.html:
<div class="tile" data-tilename="test">
<div class="tileHeader">Tile Name</div>
</div>
tile-content.html:
<div id="test-tile" class="tileContent">
<!-- lots of stuff here. -->
</div>
How can I arrive at the following?
<div class="tile">
<div class="tileHeader">Tile Name</div>
<div class="tileContent">
//lots of stuff here.
</div>
</div>
Currently all these are created dynamically, so here is my current code:
let $elTile = $('<div/>', {
class: 'tile'
}).appendTo($elContainer);
let $elTileHeader = $('<div/>', {
class: 'tileHeader',
html: tile.header
}).appendTo($elTile);
let $elTileContent = $('<div>').load('tile-content.html #' + tile.name + '-tile');
$elTile.append($elTileContent);
The last two lines above were inspired by this solution. Unfortunately it adds an extra <div> which I would like to avoid:
<div class="tile">
<div class="tileHeader">Tile Name</div>
<div> <!-- I don't want this -->
<div class="tileContent">
<!-- lots of stuff here. -->
</div>
<div>
</div>
How can I arrive at the desired solution?
There are a couple similar questions, but none that I found have solutions and my situation is slightly different (dynamically created elements).
It's because you are creating that extra div by yourself here:
let $elTileContent = $('<div>').load(...)
You should load the content, then prepend the header:
//create the tile and add it to the container
let $elTile = $('<div/>', {
class: 'tile'
}).appendTo($elContainer);
//create the header but do not add it yet
let $elTileHeader = $('<div/>', {
class: 'tileHeader',
html: tile.header
})
//load the content into the tile
$elTile.load('tile-content.html #' + tile.name + '-tile', function(){
//on the "complete" callback, prepend the header
$elTile.prepend($elTileHeader);
});
Happy Coding :)
You are telling it to give that extra div on this line:
let $elTileContent = $('<div>).load('tile-content.html #' + tile.name + '-tile')
You would need to do the load on the element with the tile class first and then duse the .prepend instead of append for the header div element so it stacks above the loaded content div.
I have a function that assigns dynamic classes to my div's. This function is a that runs on the page. After the page loads, all 10 of my primary 's have classes ".info1" or ".info2" etc...
I am trying to write a Jquery function that changes the class of the div you click on, and only that one. Here is what I have attempted:
$(".info" + (i ++)).click(function(){
$(".redditPost").toggleClass("show")
});
I have also tried:
$(".info" + (1 + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
And
$(".info" + (i + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
EDITED MY HTML: DIV RedditPost is actually a sibling to Info's parent
<div class="listrow news">
<div class="newscontainer read">
<div class=".info1"></div>
<div class="redditThumbnail"></div>
<div class="articleheader read">
</div>
<div class="redditPost mediumtext"></div>
</div>
My issue is two fold.
The variable selection for ".info" 1 - 10 isn't working because i doesn't have a value.
If I did target the correct element it would change all ".redditPost" classes instead of just targeting the nearest div.
Try like this.
$("[class^='info']").click(funtion(){
$(this).parent().find('.redditPost').toggleClass("show");
});
Alternative:
$('.listrow').each(function(){
var trigger = $(this).find("[class^='info']");
var target = $(this).find('.redditPost');
trigger.click(function(){
target.toggleClass("show");
});
});
Try this
$("div[class*='info']").click(function(){
$(this).parent().find(".redditPost").toggleClass("show")
});
Explanation:
$("div[class*='info'])
Handles click for every div with a class containing the string 'info'
$(this).parent().find(".redditPost")
Gets the redditPost class of the current clicked div
Since the class attribute can have several classes separated by spaces, you want to use the .filter() method with a RegEx to narrow down the element selection as follows:
$('div[class*="info"]').filter(function() {
return /\binfo\d+\b/g.test( $(this).attr('class') );
}).on('click', function() {
$(this).siblings('.redditPost').toggleClass('show');
});
.show {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listrow news">
<div class="newscontainer read">
<div class="info1">1</div>
<div class="redditThumbnailinfo">2</div>
<div class="articleheader read">3</div>
<div class="redditPost mediumtext">4</div>
</div>
</div>
I thought to use .index but it don't seem to work!
<div id="main">
<div id="one">
<div class="red"> ... </div>
</div>
<div id="two">
<div class="green"> ... </div>
</div>
<div id="three">
<div class="blue"> ... </div>
</div>
</div>
So I tried:
var isDivThere = $("main").index("#two") != -1;
but as mentioned, no go...
How can I simply look up a div inside div #main?
$("#main > div").index($("#two"))
var isDivThere = $("#main > div").index($("#two")) != -1;
Note: > is for filter only first level div's. So my solution will not work if you want to check the index of nested divs.
To check for existence, you can simply do this:
var isDivThere = !!$('#two').length;
If #two must exist inside #main:
var isDivThere = !!$('#main').find('#two').length;
If #two must be a child of #main:
var isDivThere = !!$('#main').children('#two').length;
To know the index of an element within its container just invoke index over the element id your are looking for:
var isDivThere = $("#two").index();
http://jsfiddle.net/NGhL7/
You need to add the # symbol for selecting by id. Working fiddle here:
$("#yourId");
http://jsfiddle.net/nnFh5/
You can use find() function of jquery,
$("#main").find("#two");
$Because the ID is unique within the all body this is enough to do what you do:
var isDivThere = !!$$("#two").length;
you will never find another element with an ID="two" so you have no need to identify that telling that is insode the main div