No, when you use $(this), it is referencing the <img> that was clicked
on. In your code <img> has no siblings.
Now if you did this:
<li class="portrait">
<img src="images/dtv_bg.png" />
<div>test</div>
</li>
then $(this) does have a sibling. The <div> is a sibling. That's why
you have to use: $(this).parent(), which references the <img>'s
parent, <li class="portrait">, and then with that find its parent's
siblings using something like next().
On Mar 13, 6:35 am, truthseekr <ponn...@gmail.com> wrote:
> James,
>
> Thank you. It works perfectly.
> I am not sure why, but the following statement does not seem to find
> the title.
>
> $(this).attr("title", $(this).siblings("li.title").text());
>
> Isn't it the same as $(this).parents().next('li.title').text()
>
> Any ideas?
>
> On Mar 12, 6:56 pm, James <james.gp....@gmail.com> wrote:
>
> > One slight change to setting the image title by using $(this):
>
> > $("img").click(function () {
> > var $title = $(this).parent().next('li.title');
> > $title.css("text-decoration", "underline");
> > $(this).attr("title", $title.text());
> > });
>
> > On Mar 12, 3:55 pm, James <james.gp....@gmail.com> wrote:
>
> > > Maybe something like:
>
> > > $("img").click(function () {
> > > var $title = $(this).parent().next('li.title');
> > > $title.css("text-decoration", "underline");
> > > $("img").attr("title", $title.text());
> > > });
>
> > > I haven't tested it, but the idea is to get the parent of the clicked
> > > image with:
> > > $(this).parent()
> > > and then get the sibling with the class 'title'. This will be
> > > referenced with the variable $title.
>
> > > On Mar 12, 11:46 am, truthseekr <ponn...@gmail.com> wrote:
>
> > > > I am a beginner, so please excuse my ignorance.
> > > > I have asimplehtml page with the following structure.
> > > > When the image is clicked, I want to be able to get the title of the
> > > > person and add as title of the image.
> > > > I am not sure how to get the selected element 'title' and not all the
> > > > li.title class items.
>
> > > > My JS looks like
> > > > $(document).ready(function(){
> > > > $("img").click(function () {
> > > > $("li.title").css("text-decoration", "underline");
> > > > $("img").attr("title",$("li.title").text());
> > > > });
> > > > });
>
> > > > <body>
> > > > <ul id="infolist">
> > > > <li>
> > > > <a class="personName" href="#">Mary Adams</a>
> > > > <div class="person">
> > > > <ul>
> > > > <li class="portrait">
> > > > <img src="images/dtv_bg.png" alt="Mary
> > > > Adams" height="30" width="30" title="asdadsa">
> > > > </li>
> > > > <li class="title">Vice President</li>
> > > > <li class="office">102 Bldg 1</li>
> > > > </li>
> > > > </ul>
> > > > </div>
> > > > </li>
> > > > <li>
> > > > <a class="personName" href="#">John Matthews</a>
> > > > <div class="person">
> > > > <ul>
> > > > <li class="portrait">
> > > > <img src="images/dtv_bg.png" alt="John
> > > > Matthews" height="30" width="30">
> > > > </li>
> > > > <li class="title">Middle Manager</li>
> > > > <li class="office">307 Bldg 1</li>
>
>
