Combine two html selections with jquery - javascript

Is it possible two combine two html selections in jquery?
var derp1 = $('#derp1').html();
var derp2 = $('#derp2').html();
var combDerp = derp1.add(derp2);
$('#derpina').html(combDerp);
I want to show two certain parts of html into one and display them in another section of the page. Any help is well appreciated :)

Since you are getting the html of each, you can just concatenate the two.
$('#derpina').html(derp1 + derp2);
Or, you can take the actual nodes and move them.
var derp1 = $("#derp1");
var derp2 = $("#derp2");
$("#derpina").html(derp1.add(derp2));

Just change
var combDerp = derp1.add(derp2);
to
var combDerp = derp1 + derp2;

Just concatenate them.
var combDerp = derp1+derp2;

You can also use JQuery .Append() if you are trying to append HTML.
http://api.jquery.com/append/

If you want the elements to move, you should just use:
$('#derp1, #derp2').contents().appendTo('#derpina');
If you want to copy them, you should use:
$('#derp1, #derp2').contents().clone().appendTo('#derpina');

Related

Joining two text values to form hyperlink

I'm prefacing this with the fact that coding is most definitely not my strong suit.
I'm currently trying to join two pieces of text to form a link sitting behind an image. The first piece of text is defined (https://www.example.mystore.com/customers/) with the second part being from a datatable (<span id="customcontent752">[Link ID]</span>). Question is - how do I get both of these pieces of information to join to form
https://www.example.mystore.com/customers/[Link ID]? I figure it's something simple I can drop into the source code, but can't for the life of me work it out.
Cheers in advance!
var firstPiece = "https://www.example.mystore.com/customers/";
var secondPiece = $("#customcontent752").text().trim();
var result = firstPiece + secondPiece; //"https://www.example.mystore.com/customers/[Link ID]"
Simply use the + operator if both are strings.
i.e
"https://www.example.mystore.com/customers/" + link_id
should get you what you want.
you can use concat :
var x = "https://www.example.mystore.com/customers/"
var y ="[link ID]"
var result = x.concat(y)

How to combine multiple scripts into one?

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

How can I select with jQuery and use javascript method to apply a change?

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);
};

jQuery: easier way to use .clone() than described below?

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');

jquery / javascript - Simple split() problem

if ($(".productpage .description").html() != null) {
var textToHide = $('.productpage .description').html().split('<br class="breakHere">')[1];
var visibleText = $('.productpage .description').html().split('<br class="breakHere">')[0];
}
Works great in Firefox, but in IE and Chrome textToHide and visibleText are undefined. Did I miss something? Thanks
View your $('.productpage .description').html(), you may be getting <br />
Using split() against HTML isn't a good idea IMHO - it's too brittle, and is likely to suffer the same problems as using Regexp's against HTML.
Assuming that the elements you're trying to split are all siblings with the <br> element, try this:
var $el = $('.productionpage .description'); // find the element
var $br = $('br.breakHere', $el); // find the BR inside it
var $vis = $br.prevAll(); // contains everything before the break
var $hide = $br.nextAll(); // contains everything after the break
Note that this will give you jQuery objects containing those elements, not the HTML text of them.

Categories

Resources