We Keep Coding

Optimizing JQuery

I have Jquery code that looks like this. Is there a way to optimize this code? What happens if the image doesn't have a title attribute? Should I insert a case for using the value of the alt attribute as a backup and If I'm chaining the .attr() function multiple times, then it'd be cleaner code I you just ran the .attr() function a single time passing a value pair object of all my properties to the function. How can I do this ?
$(function() {
$('.component-individual-detail-profile').each(function() {
var $self = $(this), $images = $self.find('.photos');
$images.find('li').click(function(e) {
e.preventDefault();
var thumb = $(this);
$images.find('.selected')
.attr('src', thumb.find('img').attr('src'))
.attr('alt', thumb.find('img').attr('alt'))
.attr('title', thumb.find('img').attr('title'));
});
});
});

You can store the attributes in a array, and cache the $thumb.find('img') selector:
$('.component-individual-detail-profile').each(function() {
var $self = $(this);
var $images = $self.find('.photos');
$images.find('li').click(function(e) {
e.preventDefault();
var $thumb = $(this).find('img');
var $selected = $images.find('.selected');
$.each(['src', 'alt', 'title'], function(index, attrName){
$selected.attr(attrName, $thumb.attr(attrName));
});
});
});

Have you considered var thumb = $(this).find("img") for starters? Anywhere your code repeats function calls, you're probably doing something wrong.
Regarding "what if there is no attribute", you can do thumb.attr('title') || thumb.attr('alt'), using the logical or (||) to provide a value if the first one doesn't exist.
According to the documentation, you can do...
$images.find('.selected').attr({
src: thumb.attr('src'),
alt: thumb.attr('alt'),
title: thumb.attr('title') || thumb.attr('alt')
});

Access polymer-elements variables with jquery

I am trying to change page with jQuery but I do not know how to access the "selected" variable.
Here is what I am trying do achieve with jQuery:
var tabs = document.querySelector('paper-tabs');
var pages = document.querySelector('core-animated-pages');
tabs.addEventListener('core-select', function(){
pages.selected = tabs.selected;
});
And I have tried something like this:
$(document).ready(function(){
$('paper-tabs').on('core-select', function(){
$('core-animated-pages').attr('selected',$(this).attr('selected'));
});
});
So how do I get pages.selected and tabs.selected with jQuery?
EDIT:
This worked for me, but I don't believe it is the optimal answer
$(document).ready(function(){
$('paper-tabs').on('core-select', function(){
$('core-animated-pages').find('section').removeClass('core-selected');
$('core-animated-pages').find('section:eq('+($(this).find('.core-selected').index())+')').addClass('core-selected');
});
});

I guess a hybrid will do..
$(document).on('core-select','paper-tabs', function(){
document.querySelector('core-animated-pages').selected = this.selected;
});

Call Javascript Function with argument and use argument as a variable name

I've the following snip of a code:
var about = "about.html";
function loadPage(target){
$("#dashboard").load(target);
}
$(".nav li").click(function(){
loadPage($(this).attr("class"));
});
So when I click on a button like <li class="about">, target is = about.
But in that way, $("#dashboard").load(target); doesn't load the variable about which is the html-file which I want to load.
So how is it possible to call the variable in this way?

You seem to miss the .html part. Try with
$("#dashboard").load(target+'.html');
But, supposing you have only one class on your li element, you'd better use this.className rather than $(this).attr("class").
EDIT :
if you want to use your about variable, you may do this :
$("#dashboard").load(window[target]);
But it would thus be cleaner to have a map :
var pages = {
'about': 'about.html',
'home': 'welcome.jsp'
}
function loadPage(target){
$("#dashboard").load(pages[target]);
}
$(".nav li").click(function(){
loadPage(this.className);
});

A stupid answer : create a <a> tag, and set its href attribute to the correct value.
Otherwise :
A standard way to store key: values pairs in javascript is to use a plain object :
var urls = {};
urls['about'] = 'mysuperduperurlforabout.html';
function loadPage(target) {
var url = urls[target];
//maybe check if url is defined ?
$('#dashboard').load(url);
}

$(".nav li").click(function(){
loadPage($(this).attr("class") + ".html");
});
or
$("#dashboard").load(target+".html");

You can call the variables like this (if that's what you asked):
var test = 'we are here';
var x = 'test';
console.log(window[x]);
It's similar to the $$ in PHP. The output will be:
we are here in the console window.

You could put the "about" as an object or array reference similar to:
var pageReferences = [];
pageReferences["about"] = "about.html";
var otherReference = {
"about": "about.html"
};
function loadPage(target) {
alert(pageReferences[target]);
alert(otherReference[target]);
$("#dashboard").load(target);
}
$(".nav li").click(function () {
loadPage($(this).attr("class"));
});
Both of these alerts will alert "about.html" referencing the appropriate objects.
EDIT: IF you wished to populate the object based on markup you could do:
var otherReference = {};
$(document).ready(function () {
$('.nav').find('li').each(function () {
var me = $(this).attr('class');
otherReference[me] = me + ".html";
});
});
You could even store the extension in an additional attribute:
var otherReference = {};
$(document).ready(function () {
$('.nav').find('li').each(function () {
var me = $(this).attr('class');
otherReference[me] = me + "." + $(this).attr("extension");
});
});
Better would be to simply put the page reference in a data element:
<li class="myli" data-pagetoload="about.html">Howdy</li>
$(".nav li").click(function () {
loadPage($(this).data("pagetoload"));
});

get and append first four images from url

that's pretty much it, how do I get the first four images from whatever url and then append them to a specified element
something like this:
$('document').ready(function(){
var thing = $.get('thing.html');
thing.slice(0,2).appendTo(".appending");
});

Try this
$('document').ready(function () {
var thing = $.get('HTMLPage.htm',
function (markup, b) {
var $page = $(markup);
$page.each(function (index, item) {
if (item.tagName == "IMG") {
$(item).appendTo(".appending");
}
});
});
});

Try this:
$('document').ready(function(){
var thing = $.get('thing.html');
thing.find('img').slice(0,4).appendTo(".appending");
});

$.get('thing.html', function(html){
//depending on what 'html' is made of, you may need to wrap it in a node
var $imgs = $(html).find('img').slice(0,4);
$(imgs).appendTo(".appending");
});

If you're expecting thing to contain HTML, try
$('document').ready(function(){
var thing = $.get('thing.html');
$(thing).filter('img').slice(0,4).appendTo(".appending");
});
.find('img') search only in descendants so if your thing contains img direcly It wouldn't work, try filter() instead http://jsfiddle.net/ouadie/UnNd9/
filter() – search through all the elements.
find() – search through all the child elements only.
http://www.mkyong.com/jquery/difference-between-filter-and-find-in-jquery/

Whats a cleaner way to append something to a link URL?

I've got this code so far, which isn't working:
$('.passName').click(function(){
var schoolName = "18734";
var link = $(this).attr('href');
var newLink = link + schoolName;
$(this).attr('href') = newLink;
});

Do the following:
$(this).attr('href', newLink);

There is a problem with your approach : you're appending the schoolName to the URL each time you click, even if the user targets another tab.
So I'd suggest to not mess with the href attribute but do the action on click :
$('.passName').click(function(){
location.href = this.href + "18734";
});
or at least check you didn't add it before :
$('.passName').click(function(){
var schoolName = "18734";
var link = this.href;
if (link.indexOf(schoolName, link.length - schoolName.length)!==-1) {
this.href = link+schoolName
}
});
or, as suggested by Felix Kling, simply ensure the function is called only once :
$('.passName').one('click', function(){
this.href += "18734"
});

In Simple, do this way:-
$('.passName').click(function() {
$(this).attr('href', this.href+'18734');
});

You actually don't need to create a new jQuery object, you can simply have:
$('.passName').click(function() {
var schoolName = "18734";
this.href += schoolName;
});
Library as jQuery as useful but we shouldn't forgot the plain JavaScript and DOM.
Plus, in JS you can't really "assign" something to a function call as you made; in jQuery the way to set an attribute's value is $(this).attr('attr', newLink)