I have a div with an ID, this div is added to the web page by the library but i want to put this div in a col-xs-6, can i do something like document.getElementById() then put it in col-xs-6?
The easiest way to do this without any framework is to use element.classList.add method.
var element = document.getElementById("div1");
element.classList.add("otherclass");
IF your using jquery then you can simply do this,
$('#Id_of_element').addClass('col-xs-6')
If I understood you correctly you want to grab this div by id and add to it bootstrap class col-xs-6. If so then try this:
var yourDiv = document.getElementById("ID");
yourDiv.className += " col-xs-6";
Related
So I try to select a div within another div. My html goes like this:
<div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div>
I want to select my #cube0 within my Stage_game_page specifically, with jQuery or JS.
The goal of the selection is to use it in an loop.
I tried :
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#Stage_game_page")$("#cube"+i)[...]
}
I don't understand what I'm doing wrong.
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#cube"+i);
}
This is sufficient to select the "#cube0"/"#cube1"/"#cube2" etc. especially since ids are always unique. To answer the question $("#cube0", "#Stage_game_page")... that is how you select a div in another div
The id attribute should only be used once! I see above that you're using id="cube0" twice. If you want your divs to be recognized in multiple instances, use a class instead (the . instead of the #). Using the same id twice will probably break your script.
I believe for your html, you could use id "cube0", "cube1", etc., as long as you're ok with entering them manually. That should work for the loop you'd like to use.
Loops through each div that starts with the id cube inside Stage_game_page1
$("#Stage_game_page1 > div[id^='cube']").each(function () {
alert($(this).html());
});
JSFiddle
Child Selctor
Starts with Selector
use each() for loop.
$('#Stage_game_page1').children().each(function(index) {
// your code here with index starts from 0
});
or this using jquery attribute starts with selector
$('#Stage_game_page1').find('[id^="cube"]').each(function(index) {
// your code here
});
You need to use .find() or .children() or the like.
The correct jQuery usage would be
$("#Stage_game_page").find('#cube'+i)
to find a div with that id inside the container #stage_game_page
You have duplicate cube0 in your html code..
and i think the look should contain something like that:
$("#cube"+i)[...]
One another solution is:
$("#Stage_game_page1 div[id='cube0']")
I want to clone the content of the div using jQuery, but from the copied content I want to find a class active and remove it before I use appendTo function.
So for example, I have this code:
<div class="box">
<p>text</p>
<div class="random active"></div>
</div>
I can copy the above code using this:
var content = $(this).find('.box').html();
Now how can I find the class active from the var content and remove it before I can appendTo?
Please note, I do not want to remove class from actual div from where I copied the content, I just want to remove from the copied code so that it is not included in the clone div.
Thanks.
Try,
var content = $(this).find('.active').removeClass('active').closest('.box').html();
As per your new request,
var content = $(this).find('.box').clone().find('.active').removeClass('active');
My way to solve the problem:
var content = $(this).find('.box').children().clone().removeClass("active");
content is a jQuery array with the content of .box (a clone of the content) with all element without active class.
An alternative:
If you need to remove the class only from an element you can add a step:
var content = $(this).find('.box').children().clone();
content.find(".random").removeClass("active");
How can you use content variable:
Right now you can .appendTo() content where you need:
content.appendTo("body"); //for example
Debug code:
To use: alert(content.html()) try this:
var content = $(this).find('.box').clone();
content.children().removeClass("active");
alert(content.html()); //HTML string but it seems the best way to use DOM
but is better this way, using console:
var content = $(this).find('.box').children().clone().removeClass("active");
console.log(content); // array of jQuery objects not simply HTML string
An example:
example: http://jsfiddle.net/Frogmouth/4dYM4/1/
enjoy, Frog.
You can do:
$(content).find('.active').remove().appendTo('body');
Try
content = $(content).find('.active').removeClass('active')
Updated after OP's comment
Fiddle Demo
var content = $(this).find('.box').clone();
content = content.find('.active').removeClass('active').closest('.box');
alert(content.html());
You can do this.
var content = $(this).find('.box').clone();
$(content).find('.active').removeClass('active');
Best way, to remove and append element
content = $('#content').clone();
$('#content').remove();
content.appendTo('#perntElement');
Hi I want to add fade in effect , to a chrome plugin which shows up using appendChild().
I want something like,
document.body.appendChild(div).fadeIn(1000);
Is their a way to do so ?
the fadeIn() method is provided by jQuery - Assuming div is a dom element reference, you need to get the jQuery wrapper for it and then call fadeIn
var div = document.createElement('div');
...
document.body.appendChild(div);
$(div).hide().fadeIn(1000);
it can even be written as
var div = document.createElement('div');
...
$(div).hide().appendTo(document.body).fadeIn(1000);
fadeIn() is a jQuery method, not a DOM method so you need to call it on a jQuery object, not a DOM object. In addition, you probably want to hide the element before appending it like this:
// assumes you already have an element to append in a variable named div
div.style.display = "none";
document.body.appendChild(div);
$(div).fadeIn(1000);
Or, using more jQuery, it could be like this:
$(div).hide().appendTo(document.body).fadeIn(1000);
Please try use this code
$('<div class="someelement"/>').appendTo('body');
$('.someelement').fadeIn();
Here is the sample code which I am not able to solve. I did it using javascript, but when I am doing using jQuery, I do not able to target the element.
Script :
var element = window.parent.document.getElementById('iframeOne');
//this is working fine
But i want to do using jQuery. So how can I target the element?
Perhaps you want to do something like this
$('#iframeOne', window.parent.document);
Another way to do it
window.parent.$("#iframeOne");
Another way
$("#iframeOne", top.document);
If you know the name of the parent window, you can also do
$("#iframeOne",opener.document)
Here opener is the name of the window.
Cheers!!
to select element with id within the parent window
$('#iframeOne',window.parent.document);
Use this:
var ele = $('#iframeOne', window.parent.document);
or
var ele = $(window.parent.document).find("#iframeOne");
The jQuery selector syntax for id is to use a # before the id name
in you case it should be $('#iframeOne')
an optional context can also be used like $('#iframeOne, window.parent.document). The default context is document root.
This'll probably be easy for someone:
var x = '<p>blah</p><div><img src="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=bsr&FlightID=2997227&Page=&PluID=0&Pos=9088" border=0 width=300 height=250></div>';
How do I extract only the portion between the div tags <div>I want this</div>
Don't focus on the <a> tag as the content could be different inside the div.
This is probably what you need:
$('div').html();
demo
This says get the div and return all the contents inside it. See more here: http://api.jquery.com/html/
If you had many divs on the page and needed to target just one, you could set an id on the div and call it like so
$('#whatever').html();
where whatever is the id
EDIT
Now that you have clarified your question re this being a string, here is a way to do it with vanilla js:
var l = x.length;
var y = x.indexOf('<div>');
var s = x.slice(y,l);
alert(s);
Demo Here
get the length of the string.
find out where the first div occurs
slice the content there.
jQuery has two methods
// First. Get content as HTML
$("#my_div_id").html();
// Second. Get content as text
$("#my_div_id").text();
Give the div a class or id and do something like this:
$("#example").get().innerHTML;
That works at the DOM level.
Use the below where x is the variable which holds the markup in question.
$(x).find("div").html();
use jquery for that:
$("#divId").html()
I suggest that you give an if to the div than:
$("#my_div_id").html();
var x = '<p>blah</p><div><img src="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=bsr&FlightID=2997227&Page=&PluID=0&Pos=9088" border=0 width=300 height=250></div>';
$(x).children('div').html();
Use the text method [text()] to get text in the div element,
by identifing the element by class or id.
This work for me
var content = '<p> demp text </p>';
$('#wordContent').html(content);
$('#wordContent').html($('#wordContent').text());