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.

单击一个按钮时,需要先查看其发生的事件并找到特定的span标记。不幸的是,它要么找不到标签,要么不改变它的内容。

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>

5 个解决方案

#1

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()

其他替代方案是使用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()

导航到父级然后调用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)

只看你的标记,使用CSS类可能更容易,而不是ids和属性过滤器来选择基于以x开头,结尾或包含x的id的元素。在所有/几乎所有浏览器中(特别是那些实现document.getElementsByClassName(classNames)或Selectors API的浏览器)可能会更快

#2

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

.prev()的问题是根据文档:

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

只返回前一个兄弟姐妹,而不是所有以前的兄弟姐妹。

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

您可能必须使用prevAll(“span [id * ='CommentText']”)(未经测试)。

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

#3

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.

编辑:您可能需要也可能不需要子选择器>。由于我使用ASP.NET,我必须经常使用它。编辑:是的,你不需要子选择器,所以我删除它。

#4

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

试试这个$(“span [id * ='CommentText']”)

#5

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.

您是否尝试过使用.live事件绑定click事件?绑定到click事件仅适用于尚未动态添加的元素。

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

#1