Keeps prepending several images

Question

I'm working on SharePoint with jQuery and each time I use the prepend() function in combination with the each() function in order to display a image before each cell in a list, I get several of those images.

More specifically, the amount of those images matchs the amount of items in the list. I bet that's a clue to what's going on, but I'm no jQuery expert

Here is a piece of code:

$(item).each(function(i, e) {
  $(e).prepend(image); 
});

Image, btw, image is a variable that contains html code for an image. Item is this:

var item = #MSO_ContentTable td.ms-vb2>div:has(>div);

This place is awesome!

Answer 1

You can just do this:

$(item).each(function(i, e) {
  $(e).prepend(image[i]); 
});

But I'm unclear on what image is, if it's a set of elements, it'll prepend to set to each match the item selector finds. If it's a jQuery element or an array, the above will work, if it's something else, please post it.

The above example takes the matching image entry and prepends it to the current item match of the same index, that's the best I can gather from the question as it was asked.

Answer 2

I suspect the problem may lie in the selector for item. It's been my experience that SharePoint-generated HTML contains a lot of "empty" elements that, while not visible in the rendered page, are picked up by jQuery queries.

I find Mozilla Firefox and Firebug indispensable when crafting jQuery selectors. Here's what I suggest:

1. Get Firefox and Firebug (if you haven't already)
2. Open your SharePoint page in FF and hit f12 to activate FB
3. In FB, switch to the Console tab (you may need to select "Enabled" from the Console drop-down menu first)
4. On the line at the bottom of the Console (denoted by >>>), type in your jQuery: jQuery("#MSO_ContentTable td.ms-vb2>div:has(>div)")
5. Hit Return; The Console's output window should show you all the matches represented by the selector. Hover your mouse over each one to see it highlighted in the page.

By using this technique, you can see if your queries pull back too many, too few or not at all the right results.

Be sure to use jQuery instead of $ in the FB console window, as the dollar-alias is also used by FB.

Good luck!