JQuery Wrap Problem

[extravaganzasd]

I am trying to wrap a div in a <table> and <tr> tags and a number of dynamic <dl> tags with <td> tags. Here is the code I am using the the head tag

<script type="text/javascript">                                         
    jQuery(document).ready(function() {
	jQuery(".gallery").wrap("<table><tr></tr></table>");
		jQuery(".gallery-item").wrap("<td></td>");
		}
</script>

The code that I am trying to manipulate is:

<div id='gallery-1' class='gallery galleryid-249 gallery-columns-9 gallery-size-thumbnail'><dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='http://tendliving.com/beta/test-gallery/art-glass-web-ready-1-of-54/' title='art glass web ready (1 of 54)'><img width="150" height="150" src="http://tendliving.com/beta/wp-content/uploads/2012/01/art-glass-web-ready-1-of-54-150x150.jpg" class="attachment-thumbnail" alt="art glass web ready (1 of 54)" title="art glass web ready (1 of 54)" /></a>
			</dt></dl>

It is having no impact though. It is a WordPress site and my page is at http://tendliving.com/beta/test-gallery/ (to view user and pass are both"test"). Any help is really appreciated!

[AussieJohn]

Looks like you left off a closing parentheses at the end of the .ready();

e.g.

jQuery(document).ready(function() {
    jQuery(".gallery").wrap("<table><tr></tr></table>");
    jQuery(".gallery-item").wrap("<td></td>");
}); //make sure you close of the .ready() method here

I'll also add that using definition lists (<dl>) in this manner would probably be wrong tag to use from a semantics point of view, especially if you're not using the description part and using one <dl> per gallery item. (See http://www.maxdesign.com.au/articles/definition/ for more info on definition lists :-)).

It would probably be better to use an unordered list to markup the gallery images, e.g.

<ul  id="gallery-1" class="gallery galleryid-249 gallery-columns-9 gallery-size-thumbnail">
  <li> 
    <a href="http://example.com/link/">
      <img width="150" height="150" src="image.jpg" class="attachment-thumbnail" alt="Alt text here" />
    </a> 
  </li>
  <li> <a href="http://example.com/link/"> <img width="150" height="150" src="image.jpg" class="attachment-thumbnail" alt="Alt text here" /> </a> </li>
  <li> <a href="http://example.com/link/"> <img width="150" height="150" src="image.jpg" class="attachment-thumbnail" alt="Alt text here" /> </a> </li>
</ul>

Of course if this is all generated code via a wordpress plugin or something like that, you might not be able to modify the markup without modifying the plugin, (unless it has templates you can define of course).

Is there a particular reason you're trying to wrap a table around your gallery anyway? What are you trying to achieve? (There might be easier / better ways...)

[extravaganzasd]

Wow thanks John! That was it. I don't use JQuery that much directly so I am always nervous - it looks like I ALMOST had it - thanks for spotting the omission. You are right about it being generated content - in this case it is coming from the output of the WordPress "[gallery]" shortcode. I am using a table because I am trying to force a horizontal scroll - rather than having the images wrap. Obviously I am still not there yet but this gets me closer.

[AussieJohn]

in this case it is coming from the output of the WordPress "[gallery]" shortcode.

You can control the markup generated by the [gallery] shortcode to a certain extent. There are 3 options:

itemtag
the name of the XHTML tag used to enclose each item in the gallery. The default is "dl".

icontag
the name of the XHTML tag used to enclose each thumbnail icon in the gallery. The default is "dt".

captiontag
the name of the XHTML tag used to enclose each caption. The default is "dd". For example, to change the gallery markup to use div, span and p tags:

[gallery itemtag="div" icontag="span" captiontag="p" link="file"]

(See http://codex.wordpress.org/Gallery_Shortcode)

I am using a table because I am trying to force a horizontal scroll - rather than having the images wrap. Obviously I am still not there yet but this gets me closer.

Are you trying to achieve a horizontal scroll on the entire page or just 1 section? Both of these can be done with just a few lines of CSS, no JavaScript (or tables) required :-)

Take a look at this JS Fiddle - http://jsfiddle.net/GeekyJohn/QgC4Z/embedded/result/ - in which you'll see two lists that are scrolling horizontally, 1 that makes the page scroll and 1 that scrolls in place.

Of course there are many carousel / slider / gallery plugins available for jQuery that will implement something similar for you with some nice animations attached as well.