I am trying to pull each element 'one by one' from two separate HTML lists and print each element after the other. If that doesn't make sense, here is some pseudo-code to better explain what I am trying to accomplish.
$('#tracktitle').append("<li class='titlelist'><a href='" + track.permalink_url + "' target='_blank'>" + track.title +"</a><br></li>")
$('#trackimage').append("<li class='imagelist'><a href='" + track.permalink_url + "' target='_blank'><img src='" + track.artwork_url + "' /></a></li>");
for(var i =0;i<7;i++){
// print 1st tracktitle
// print 1st image
// print 2nd tracktitle
// 2nd image ... etc
}
any help would be greatly appreciated
If you have to use for loop do this
for (var i = 0; i < 7; i++) {
$('#tracktitle').find('li:eq(' + i + ')'); // gives you the li tracktitle element as per index
$('#trackimage').find('li:eq(' + i + ')'); // gives you the li trackimage element as per index
}
To get the text and image use
$('#tracktitle').find('li:eq(' + i + ')').find('a').text();
$('#trackimage').find('li:eq(' + i + ')').find('a').html()
You can also use jquery.each if you want to navigate for elements
$('#tracktitle').find('li.titlelist').each(function () {
$(this) // gives you li element
});
Check http://jsfiddle.net/raunakkathuria/FVTUN/3/
Related
I am seeking help trying to add a new table in my third function called ingredients. I am not very familiar with javascript so I tried to duplicate code from newDosage which is similar to what I need to do. Unfortunately, right now all I see is 0, 1, or 2 and not the actual text from the ingredient table. If anyone can help me correctly call the table, it would be greatly appreciated. Thank you.
Below is my code. The first function pulls the database, the second function uses the results and the third function is where I have tried to add the ingredient table.
function listTreatmentDb(tx) {
var category = getUrlVars().category;
var mainsymptom = getUrlVars().mainsymptom;
var addsymptom = getUrlVars().addsymptom;
tx.executeSql('SELECT * FROM `Main Database` WHERE Category="' + category +
'" AND Main_Symptom="' + mainsymptom + '" AND Add_Symptom="' + addsymptom + '"',[],txSuccessListTreatment);
}
function txSuccessListTreatment(tx,results) {
var tubeDest = "#products";
var len = results.rows.length;
var treat;
for (var i=0; i < len; i = i + 1) {
treat = results.rows.item(i);
$("#warning").append("<li class='treatment'>" + treat.Tips + "</li>");
$("#warning-text").text(treat.Tips);
$('#warning').listview('refresh');
//console.log("Specialty Product #1: " + treat.Specialty1);
if(treat.Specialty1){
$("#products").append(formatProductDisplay('specialty1', treat.Specialty1, treat.PurposeSpecialty1, treat.DosageSpecialty1, '1'));
}
if(treat.Specialty2){
$("#products").append(formatProductDisplay('specialty2', treat.Specialty2, treat.PurposeSpecialty2, treat.DosageSpecialty2, '0'));
}
}
}
function formatProductDisplay(type, productName, productPurpose, productDosage, Ingredients, aster){
var newDosage = productDosage.replace(/"\n"/g, "");
if(aster=='1'){ productHTML += "*" }
productHTML+= "</div>" +
"</div>" +
"<div class='productdose'><div class='label'>dosage:</div>" + newDosage + "</div>" +
"<div class='productdose'><div class='label'>ingredients:</div>" + Ingredients +
"</div></li>"
return productHTML;
}
You are missing an argument when you call formatProductDisplay(). You forgot to pass in treat.Ingredient.
Change:
$("#products").append(formatProductDisplay('specialty1', treat.Specialty1, treat.PurposeSpecialty1, treat.DosageSpecialty1, '1'));
To:
$("#products").append(formatProductDisplay('specialty1', treat.Specialty1, treat.PurposeSpecialty1, treat.DosageSpecialty1, treat.Ingredients, '1'));
Also do the same thing to the similar 'Specialty2' line right below it.
I have a Javascript function that prints various information from a json file and displays it in a table of contents fashion. It parses the information and prints it into a "ui-grid-b" div because i want them in rows of 3. I had a problem with the javascript printing repeatedly every time the page was opened so I added in a function to clear the div every time it prints. However, when I open a new seperate page with a "ui-grid-b" div in it it clears that and prints the table of contents again. Here's the js code and I hope you can help:
<script type="text/javascript">
var grid= new Array();
grid[0]= "a";
grid[1]= "b";
grid[2]= "c";
var j=0;
var color= new Array();
color[0]= '#00c6c4;';
color[1]= '#6fc41b;';
color[2]= '#ffbd0c;';
color[3]= '#ff84f1;';
color[4]= '#1fbbff;';
color[5]= '#ff1700;';
color[6]= '#976833;';
var k=0;
$(document).on("pageinit", "#Page1", function(){
var imp= "Json/empirical.json";
$.getJSON(imp, function(data) {
j=0;
k=0;
var toc= '';
$.each(data.tcontent, function(index, item) {
if (j > 2) { j = 0; }
if (k > 6) { k = 0; }
toc += "<div class='ui-block- ' " + grid[j] + " '>" + item.url + '<div class="grid" style="background-color: ' + color[k] + ' ">' + "<p class='gridtext'>" + item.Name + "</p>" + "</div>" + "</a>" + "</div>"
j++;
k++;
});
$(".ui-grid-b").empty().append(toc);
});
});
</script>
Assign your toc grid a unique ID:
<div id="theTOC" class="ui-grid-b"></div>
Then in your code instead of:
$(".ui-grid-b").empty().append(toc);
do
$("#theTOC").empty().append(toc);
Make sure this id is unique accross all pages. Also make sure your pages have unique IDs (i.e. only one page called "Page1").
I have created an image gallery grid and trying to output the images. I have attempted putting the path in var thumb ="path"; and then concatenating it to the json_data but the path to the image cannot be read. Any ideas?
function ajaxfunction(json_data){
var path = "images/products/shirts/smallthumbs/"; // path to image
var url = "#";
var table = $("<table></table>");
var tr = $("<tr></tr>").appendTo(table);
for (var i = 0; i < json_data.length ; i++){
if (i %4==0)
tr = $("<tr></tr>").appendTo(table);
$(tr).append("<td>"+json_data[i].prod_name+"<br/>"+
" " + "<img src="+path+json_data[i].pic"/>"+"<br/>"+ //attempting output
"\u00A3"+json_data[i].price+"</td>");
}
$("#maindisplay").append(table);
}
This line $(tr).append("<td>"+json_data[i].prod_name+"<br/>"+
" " + "<img src="+path+json_data[i].pic"/>"+"<br/>"+ //attempting output
"\u00A3"+json_data[i].price+"</td>");
Needs to have proper quotation marks separating the strings (it is better to use ' for JavaScript strings so you can use " for attributes in the HTML:
$(tr).append('<td>' + json_data[i].prod_name + '<br/>' +
' ' + '<img src="' + path + json_data[i].pic + '"/>' + '<br/>' + //attempting output
'\u00A3' + json_data[i].price + '</td>');
Also, it's not very efficient to have multiple calls to .appendTo(). You should generate the HMTL elements in one go, and not multiple .append() calls.
Enclose the src attribute content (that is your path data) on single quotes, so replace your following code:
... +"><img src="+path+json_data[i].pic"/></a>"+ ...
for this one:
... +"><img src='"+path+json_data[i].pic"'/></a>"+ ...
I am trying to populate a div (class='thumb") with thumnailpictures. The name of the pictures is gathered from an xml file. Every thumnail picture is encapsulated with an a-tag that points to a function to show the full picture.
On some browsers the first thumbnailpicture seems not to have this a-tag...clicking on it gives no action...
var rubriek = gup('rubriek'), // rubriek is a parameter in the url of this page pointing a specific photogallery
gallerij = rubriek + "gallery.xml",
xmlDoc = loadXMLDoc(gallerij),
x = xmlDoc.getElementsByTagName("filename"),
legebron = x[0].childNodes[0].nodeValue;
for (i = 0; i < x.length; i++) {
var beeldnummer = x[i].childNodes[0].nodeValue,
index = i + 1,
kleinbeeld = "/" + rubriek + "images/thumb/" + beeldnummer;
$('.thumb').append('<p><a class="kleintje" onclick="toonDezeFoto("' + beeldnummer + '",' + index + ',' + x.length + ');">
<img src="' + kleinbeeld + '" id="' + index + '">
</a></p>');
}
See http://www.karinedaelman.be/foto.php?rubriek=Mensen/
Found the solution: the z-index of the div that keeps the thumbnails was too low. Another div that has the site logo in it had a higher z-index and a width of 100%. Because of that the first thumbnail image was on a layer below the site logo and could not be accessed by the mouseevents....
I am appending p tags to a div as I process a json request and would liek to style it according to what is in the request.
$(document).ready(function() {
function populatePage() {
var numberOfEntries = 0;
var total = 0;
var retrieveVal = "http://www.reddit.com/" + $("#addressBox").val() + ".json";
$("#redditbox").children().remove();
$.getJSON(retrieveVal, function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
ups = this.data.ups;
downs = this.data.downs;
total += (ups - downs);
numberOfEntries += 1;
$("#redditbox").append("<p>" + ups + ":" + downs + " " + title + "<p>");
$("#redditbox :last-child").css('font-size', ups%20); //This is the line in question
});
$("#titlebox h1").append(total/numberOfEntries);
});
}
populatePage()
$(".button").click(function() {
populatePage();
});
});
Unfortunately things are not quite working out as planned. The styling at the line in question is applying to every child of the div, not just the one that happens to be appended at the time, so they all end up the same size, not sized dependent on their numbers.
how can I apply a style to the p tags as they are appended ot the div?
Edit: Thanks Fortes and Veggerby both worked, but i went with Fortes in the end because I did.
You can use JQuery's appendTo instead of append. For your example:
$("<p>" + ups + ":" + downs + " " + title + "<p>")
.css('font-size', ups%20)
.appendTo('#redditbox');
Here are the docs for appendTo: http://docs.jquery.com/Manipulation/appendTo
Replace:
$("#redditbox").append("<p>" + ups + ":" + downs + " " + title + "<p>");
with
var p = $("<p>" + ups + ":" + downs + " " + title + "<p>");
$("p", p).css('font-size', ups%20)
$("#redditbox").append(p);
Can probably be condensed even further.
Edit:
Condensed like:
$("#redditbox").append(
$("<p></p>").css('font-size', ups%20).append(ups + ":" + downs + " " + title + "")
);
Certain browsers/versions do not support the :last-child CSS selector. In that case they often ignore it and return all elements matching the remainder of the selector. This is possibly what you are seeing.
As usual IE is one such browser.
veggerby's approach should help you get around the need to use :last-child.