How to get jQuery elements from an array of selectors

MikeGrace
3 Comments
August 26th
How to, Web Design -Dev



To use an array of strings as jQuery selectors I have found the need to append an empty string.
My bad example works because it coerces the ‘this’ object to a string.

Bad Example:

array = ["h1","p","div"];
$K(array).each(function() {
    console.warn( $K(this+"").children() );
});

Much Better Example:

array = ["h1","p","div"];
$K(array).each(function(index, value) {
    console.warn( $K(value).children() );
});

I had previously tried the following with out success

array = ["h1","p","div"];
$K(array).each(function() {
    console.warn( $K(this).children() );
});

The problem of what I was originally trying was that each item in the array wasn’t being treated as a string, I think.The problem of what I was originally trying was that ‘this’ is an object and not a string like I need for the jQuery selector.

A big thanks goes out to my friends,Alex Olson & Sam Curren, for helping me understand my mistake while being tired.

If I didn’t need to do something different for each time through the loop I could do something like this stack overflow answer:

array = ["h1","p","div"];
console.warn( $K( array.join(", ") ).children() );

Getting into jQuery

MikeGrace
1 Comment
July 21st
Education, How to, Web Design -Dev

Swiss Army Knife Cadet 1

I have a friend that is wanting to get into learning and using jQuery so I thought that I would throw some information together to help them get started.

Documentation

Love jQuery’s documentation! I love being able to go to http://api.jquery.com/ and being able to quickly search for what I am looking for. This is great for when I know roughly what I want and just need a bit of information on how to do it. When I was starting out, the documentation main page was the place to be http://docs.jquery.com/

Including jQuery into projects

So you can download the jQuery code from the site and put it up on S3 or your own hosting service and include it into your projects that you are working on but why not let Google do it for you if it makes life easier? Google has a bunch of script libraries that they host for free that are used commonly. To include jQuery in your project stress free try this

Document Ready

One thing that can be frustrating when just starting out using jQuery is finding out the hard way of why you have to wait for the page to load before your functions can work. What??!! jQuery is a JavaScript library that extends native functionality of JavaScript and just plain makes JavaScript easier to work with. Problem is, none of your jQuery functions will work until the library is completely loaded and the structure of the html is in the browser. You can make sure your jQuery functions don’t try to do anything until the page is ready by putting your code in a document read wrapper that jQuery makes easy.

$(document).ready(function() {
  // Your jQuery code goes here
});

Shortcut

Because using jQuery is soo awesome and you are going to be using it soo much, the shortcut ‘$’ was used to reference jQuery. So the following two jQuery functions are the same.

jQuery("#ajax img").hide();
$("#ajax img").hide();

Help

Just remember when you get frustrated or you need help understanding something with jQuery do a Google search for what your having trouble with. If that doesn’t get you what you are looking for, ask a friend! There are many who have loved using jQuery and would love to help a friend out. Also, don’t forget the ever awesome http://stackoverflow.com/ which is a great place to find, ask, and answer programming related stuff! jQuery included.

Example

Here is a full and simple working example that I created just to show off a bit of the fun power of jQuery. Again, jQuery documentation rocks and has many examples but I thought this would be nice to pull together everything I had talked about here.

https://mikegrace.s3.amazonaws.com/geek-blog/jquery-example-1/jquery-example-1.html

photo by Quality & Style

jQuery vs Flash

MikeGrace
1 Comment
July 16th
Other

jQuery_vs_Flash

In the fight of jQuery vs Flash there are many arguments on both sides but I think this smart bird sums it up nicely. ; )

Twitter on my blog

MikeGrace
No Comments
March 18th
Other

jQueryI finally made enough time to put a twitter feed on my blog and man does it feel good to have that done. I found a fun jQuery based widget called Juitter that can be found at http://juitter.com/

I changed some of the functionality and the css in the jQuery functions so it would be a little more compacte and now it is looking great. Really easy to install but if you are wanting to customize it beyond how many tweets show up you are going to need a fair understanding of jQuery.

Reblog this post [with Zemanta]