get and append first four images from url - javascript

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/

Related

How to select and each in Xml child element?

I want to use jQuery.each() method on XML child elements.
Below is my code.
$(function() {
var xml = "<approvalcontent><vac_applier>Name</vac_applier><vac_sdate>2017-02-03</vac_sdate><vac_edate>2017-02-10</vac_edate><vac_reason>kind</vac_reason></approvalcontent>";
bindContent(xml);
});
function bindContent(xml) {
$(xml).find("approvalcontent").children().each(function(){
alert("here!");
});
}
But this each function shows anything.
I want to roof as much as Xml elements.
How can I solve it?
jQuery's find() only works for descendants, your <approvalcontent> element is a root element, so what you wanted was probably filter() instead
$(xml).filter("approvalcontent")...
You should however be parsing the XML before accessing it, as that would give you an actual valid XML document to work with, and you could use find()
function bindContent(xml) {
var parsed = $.parseXML(xml);
$(parsed).find("approvalcontent").children().each(function() {
alert("here!");
});
}
Just use $(xml).children()
$(function() {
var xml = "<approvalcontent><vac_applier>Name</vac_applier><vac_sdate>2017-02-03</vac_sdate><vac_edate>2017-02-10</vac_edate><vac_reason>kind</vac_reason></approvalcontent>";
bindContent(xml);
});
function bindContent(xml) {
$(xml).children().each(function() {
console.log("here!");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You need to use .filter() instead of .find() as approvalcontent is at top level.
$(function() {
var xml = "<approvalcontent><vac_applier>Name</vac_applier><vac_sdate>2017-02-03</vac_sdate><vac_edate>2017-02-10</vac_edate><vac_reason>kind</vac_reason></approvalcontent>";
bindContent(xml);
});
function bindContent(xml) {
$(xml).filter("approvalcontent").children().each(function() {
alert("here!");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hiding images with same data value jquery

Im trying to code a site where the objective is to click on two identical images and it hides the both the images you've managed to match to eachother.
$(document).ready(function(){
var animal1;
var animal2;
$(".memory1").on("click", function(){
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function(){
animal2 = $(this).data('animal');
if (animal1==animal2){
$(this).data('animal').hide();
}
else {
alert("Wrong, Try again!");
}
});
});
so the line where its going wrong is obviously
$(this).data('animal').hide();
But I cant figure out a way to hide both images, or a better way of going about it.. :/
http://jsfiddle.net/4vgfca76/
This doesn't work the way you think it does
$(this).data('animal').hide();
When data is used with one argument, it get's the data attribute, which you should already know as you're doing it a few lines above.
What you get is the string hund etc. and that string doesn't have a hide() method.
You should be using the attributes selector to select the elements with that attribute instead
$(document).ready(function () {
var animal1, animal2;
$(".memory1").on("click", function () {
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function () {
animal2 = $(this).data('animal');
if (animal1 == animal2) {
$('img[data-animal="'+animal1+'"]').hide();
} else {
alert("Fel! Försök igen");
}
});
});

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

How to get image id using jQuery?

I have written code like this. <img id='test_img' src='../../..' />
I want to get the id of this image on image load like,
$(img).load(function() {
// Here I want to get image id i.e. test_img
});
Can you please help me?
Thanks.
$(img).load(function() {
var id = $(this).attr("id");
//etc
});
good luck!!
edit:
//suggested by the others (most efficient)
var id = this.id;
//or if you want to keep using the object
var $img = $(this);
var id = $img.attr("id")
Don't use $(this).attr('id'), it's taking the long, inefficient route. Just this.id is necessary and it avoids re-wrapping the element with jQuery and the execution of the attr() function (which maps to the property anyway!).
$(img).load(function() {
alert(this.id);
});
$(function() {
$('img#test_img').bind('load', function() {
console.log(this.id); //console.log($(this).attr('id'));
});
});
$(img).load(function() {
alert($(this).attr('id'));
});

jQuery ancestors using jQuery objects

I'd like to check ancestry using two jQuery objects. They don't have IDs, and are only going to be available as jQuery objects (or DOM nodes if you called get()). jQuery's is() only works with expressions, so this code would be ideal but will not work:
var someDiv = $('#div');
$('a').click(function() {
if ($(this).parents().is(someDiv)) {
alert('boo');
}
}
Just want to see if one element is a child of another and I'd like to avoid stepping back into DOM land if possible.
You can use the index() method to check if an element exists in a list, so would the following work?
var someDiv = $('#div');
$('a').click(function() {
if ($(this).parents().index(someDiv) >= 0) {
alert('boo');
}
}
From #index reference.
Checking for (this).parents().index(someDiv) >= 0, as #Gareth suggests, will work just fine.
However, using the jQuery ancestry plugin is way faster / more efficient.
Along those lines, parents() optionally accepts a selector itself:
$('a').click(function() {
if ($(this).parents("#div").length) {
alert('boo');
}
});
One way would be to use the filter function
$('a').click(function() {
$(this).parents().filter(function() {
return this == someDiv[0];
}).each(function() {
alert('foo');
})
}
I think you may also be able to get away with using jQuery.inArray
if ($.inArray( someDiv, $(this).parents() ) ) {
alert('boo');
}
Would you not get the result you want from simply using a CSS selector?
$( '#div a' ).click( function() { ... } );
Try this:
var someDiv = $('#div');
$('a').click(function() {
if ($.inArray($(this).parents().get(), someDiv.get(0)) {
alert('boo');
}
}
var $element = $('a');
while ($element && !$element.is('someDiv')) {
var $element = $element.parent();
};

Categories