If you execute in the console on this page
var cloned = $(".question").clone(true);
$(".question").addClass("first");
var clonedStr = cloned[0].outerHTML || new XMLSerializer().serializeToString(cloned[0]);
$(".question").after(clonedStr);
you will clone the question (there will be two questions on the page, but the first one will be with the .first class). That's what is needed.
Is there any simpler way to do this with jQuery? I'm confused of the third string in the code above and believe it could be simpler. Any ideas?
Thank you.
If you don't use the HTML as string, then don't get it. Just use the jQuery object:
var cloned = $(".question").clone(true);
$(".question").addClass("first").after(cloned);
Also, you can do it one line:
$(".question").after($(".question").clone(true)).first().addClass("first");
You could use insertAfter to insert the cloned element after changing the class. You don't need to convert the element in the jQuery object to a string, you can use that object within the function itself:
var $question = $('.question');
var $cloned = $question.clone(true).insertAfter($question);
$question.addClass('first');
Related
Sorry if I repeat the question that was asked before, but I can not find a solution for my task. How can I get links from a variable as in the case with document.
Example:
var $str = parseHTML ("<td><a>1...<span><a>2...</div><a>2...</table>"),
$x = $("#newDiv");
if I appending this variable in the document it's possible to get a links
$x.append($str);
I can call
var $rf = document.links;
but how can I get the links without appending directly from variable $str
Thanks!!!
$.parseHTML returns a jQuery object, and you can use jQuery's DOM methods on it.
var $rf = $str.find("a");
I've got five of the same scripts that just use five different variables. #video0 to #video4. I'm just not quite sure on how to combine them all so I don't have redundant code. I've been trying to make them all variables
var video= [
$('#video0'),
$('#video1'),
$('#video2'),
$('#video3'),
$('#video4')
];
http://jsfiddle.net/cwfybnzr/
Use each() with the array
var videos = [
$('#video0'),
$('#video1'),
$('#video2'),
$('#video3'),
$('#video4')
];
$(function() {
$.each(videos, function(){
var iframe = $(this)[0];
...
});
});
Isn't it better to create class for those elements? Then it will be possible to iterate through them using simple jQuery syntax: $('.video'). Plus it would not require changing any JavaScript code when new videos will be added.
You can add a class element like videoCSS to all the elements and then loop through them like
$('.videoCSS').each(function(){
var player = $(this);
// your code here
});
This way you can future proof you js code as you can add as many new player/iframes to the HTML with videoCSS class and your js code will still be the same.
Also, I found that in your code you are doing like
var iframe = $('#video0')[0];
var player = $(iframe);
Which means that first you are getting a jquery object using $('#video0'), then you are trying to get a DOM element out of it like $('#video0')[0] and then again you are converting it to a jquery object using $(iframe).
I think there is no need of this much extra processing, you can simply use
var player = $('#video0');
or using my updated code like
var player = $(this);
UPDATED FIDDLE
I'd like to use a variation of this code, but I'm having a bit of trouble concatenating the following snippet. Essentially using a for loop from a returned value.length and append the buttons, then replace data for buttons:
for(var i...){
var button = "'<button>%data%</button>'";
$(".buttons").append(button).replace("%data%", var);
};
You don't need to make the replace after you append the element. You should just set var directly on element either with text or html, depending on what var holds. Also, please notice that jQuery doesn't have a method called replace, it only has replaceWith (http://api.jquery.com/replaceWith/) and replaceAll (http://api.jquery.com/replaceAll/).
for(var i...){
var button = $("<button></button>").text(var);
$(".buttons").append(button);
};
When I use JavaScript it works.
var submitButton = document.getElementById("submitButton");
When I use jQuery to declare it it doesn't.
var submitButton = $('#submitButton');
I realized when debugging, jQuery is creating a object for the variable.
submitButton: Object[span#submitButton.wordButtonD]
In JavaScript
submitButton: span#submitButton.wordButtonD
How do get this to be like javaScript??
I think what you are looking for is: submitButton[0]
Just remember to check the length (greater than 0) because jQuery will return a result even though the element has not been found.
Just use Javascript and the result will be as you want. jQuery create its own object to control :). Or please explain more why do you need the result span#submitButton.wordButtonD but not Object[span#submitButton.wordButtonD]?
statement 1:
var submitButton1 = document.getElementById("submitButton");
statement 2:
var submitButton2 = $('#submitButton');
In above statements, submitButton1 is a DOM object and submitButton2 is a Jquery Object (which already warped your DOM object). Thus, If you want to get Dom object from Jquery object, just do:
var submitButton3 = submitButton2[0]
OR
var submitButton3= submitButton2.get(0)
Now, 2 Dom object submitButton1 and submitButton3 are the same.
Consider this:
var i=$('<img src="/path/to/imgI.png"/>');
var j=$('<img src="/path/to/imgJ.png"/>');
$([i,j]).css('cursor','hand');
The cursor is not changed however and I don't know why..
When I do it separately, it works.
Thanks.
The array is of two jQuery objects when what you require is the DOM elements within those jQuery objects. This will work:
var i=$('<img src="/path/to/imgI.png"/>')[0]; // <= Notice [0]
var j=$('<img src="/path/to/imgJ.png"/>')[0];
$([i,j]).css('cursor','pointer');
Alternatively, (using add())
var i=$('<img src="/path/to/imgI.png"/>');
var j=$('<img src="/path/to/imgJ.png"/>');
$(i).add(j).css('cursor','pointer');
EDIT: Also, use cursor:pointer; instead of cursor:hand;
Are you sure your problems isn't browser specific? That particular css property is tricky, it requires the property be set two different ways to work in IE and Firefox.
I'd recommend using a class in the img tag to specify the hand property. Then you can specify both rules and get what you are looking for.
Would make more sense to put selectors in the array:
var i = $('<img src="/path/to/imgI.png"/>').attr('id','i');
var j = $('<img src="/path/to/imgJ.png"/>').attr('id','j');
$( ['#i', '#j'] ).css('cursor','hand');
The correct cursor property is "pointer" not "hand", which is an IE only extension no longer required for anything but IE 5.5 and lower - i.e. very rarely.
You can use jQuery method to turn the jQuery object into a true array and then merge them.
var i=$('<img src="/path/to/imgI.png"/>');
var j=$('<img src="/path/to/imgJ.png"/>');
i = $.makeArray(i);
j = $.makeArray(j);
$( $.merge(i,j) ).css('cursor','pointer');
Btw that also works when you need to add multiple jQuery selection together,
i = $.makeArray( $('div') );
j = $.makeArray( $('a') );
$( $.merge(i,j) ); //this jQuery object holds all divs and a's
You could of course also do that like this:
$('div').add('a');