tags:

views:

88

answers:

5
Q: 

How do I access a SPAN element using the PREV function in JQuery?

When a button is clicked it needs to look before its ocurance and find a specific span tag. Unfortunately it is either not finding the tag or not changing it's contents.

This is the code that doesn't work.

$(this).prev("span[id*=CommentText]").hide();

I can set the colour during the load event but when the link is clicked it won't make any changes.

This works but only during the load phase:

$("span[id*=CommentText]").css("background-Color", "red");

EDIT:

<html>
<head>
    <script src="../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.color.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("textarea[id*=Comments]").hide().css("background-Color", "white");
            $("span[id*=CommentText]").css("background-Color", "red");
            $("a[id*=CommentLink]").click(LoadComments).css("background-Color", "white");
        });
        function LoadComments() {
            $(this).prev("textarea[id*=Comments]").animate({ backgroundColor: 'yellow' }, 500).show().focus();
            $(this).prev("span[id*=CommentText]").css("background-Color", "white");
            $(this).fadeOut();
        }
    </script>
</head>
<body>
     <span id="Q37CommentText">comments here</span>
     <textarea name="Q37Comments" rows="1" cols="50" id="Q37Comments">comments here</textarea>
     <a id="Q37CommentLink">Add/Edit Comment</a>

     <span id="Q40CommentText">Comment 2</span>
     <textarea name="Q40Comments" rows="1" cols="50" id="Q40Comments">Comment 2</textarea>
     <a id="Q40CommentLink">Add/Edit Comment</a>
</body>
</html>
A: 

try this $("span[id*='CommentText']")

antpaw  2010-01-03 23:20:17
Sorry but this doesn't work.
Middletone  2010-01-03 23:23:42
A: 

Have you tried using the .live event to bind the click event? Binding to the click event will only work with elements that haven't been dynamically added.

http://docs.jquery.com/Events/live

Mike Robinson  2010-01-03 23:31:11
The click event does fire as the other elements on the page change correctly. Using the first line $("span[id*=CommentText]").css("background-Color", "red");I can change the properties during he click event but I can't seem to get at the individual element.
Middletone  2010-01-03 23:34:36
+1  A: 

The problem with .prev() is that according to the docs:

Only the immediately previous sibling is returned, not all previous siblings.

You'd probably have to use prevAll("span[id*='CommentText']") (not tested).

http://docs.jquery.com/Traversing/prevAll

Januz  2010-01-03 23:36:08
Good answer; the bottom line is "that's not how prev(expr) works".
Stobor  2010-01-03 23:45:30
+1  A: 

Try this:

$(this).parent().find("span[id*=CommentText]").hide();

edit: you may or may not need the child selector >. Since I use ASP.NET, I have to use it quite often.
edit: yeah, you don't need the child selector, so I removed it.

Jim Schubert  2010-01-03 23:37:10
Good answer. This works in my case where the elements are in a sort of container but it won't work if they ar ein the same container.
Middletone  2010-01-03 23:43:12
I see what you mean. My comment referred to your original post where the elements were within TD containers. As your post is currently, it wouldn't work. I would suggest using certain naming conventions and selecting based on id instead of DOM position. After all, you'll have to revisit this issue if you decide to split comments or add an element between the anchor and the span.
Jim Schubert  2010-01-04 00:44:24
+4  A: 

If the structure of your markup is always the same, I'de be inclined to just keep it simple and go with

$(this).prev().prev() ...

Other alternatives are using prevAll()

$(this).prevAll('span:first'); // may or may not need the attribute filter depending
                            // on if there are more <span> elements as siblings

Navigating up to the parent and then calling find()

$(this).parent().find('span[id*=CommentText]');

A side note:

Just looking at your markup, it may be easier to use CSS classes as opposed to ids and attribute filters to select elements based on ids beginning with, ending with or containing x. It's likely to be faster in all/nearly all browsers (particularly those that implement document.getElementsByClassName(classNames) or the Selectors API)

Russ Cam  2010-01-03 23:42:23
$(this).prev().prev().css("background-Color", "white").hide(); works and won't fail in the case that the elements are in the same container.
Middletone  2010-01-03 23:44:58
+1 great answer!
Jim Schubert  2010-01-11 17:11:22

related questions

Communicating between websites (using Javascript or ?)
Javascript Unit-testing?
How can I return a variable from a $.getJSON function
Is there an "exists" function for jQuery
Why do I receive a q[num] error when aborting a jQuery queue pipeline?
How do I fire an event when a iframe has finished loading in jQuery?
How to compare html entity with JQuery
Problems while submitting a UTF-8 form textarea with JQuery/AJAX
How do I get the coordinates of the caret in text boxes?
SimpleModal breaks ASP.Net Postbacks
How would you handle errors when using jQuery.ajax() ?
Where is the best jQuery "plugins" library on the web?
Where can I learn jQuery? Is it worth it?
Keeping key value pairs together in HTML <select/> with JQuery?
How to set encoding in .getJSON JQuery
What is a selector engine?
Escaping HTML strings with jQuery
jQuery AJAX vs. UpdatePanel
What's the best way to code a desktop application-like menu bar in Javascript?
Dynamic Alphabetical Navigation
Scrolling Overflowed DIVs with JavaScript
How do I add a pre tag inside a code tag with jQuery?
Graph visualization code in javascript?
Wrapping lists into columns
Interview Questions for an Intern