Текущий элемент $(this)

[StasB]

JQuery
Такая вот проблема... Не знаю как работает $(this)
В интернете ничего не нашел...

Вот код:

Код: Выделить всё • Развернуть

$(document).ready(function()
{
    $('.BlokProfileFriendsLeft .FriendsAddDelete').click(function()
    {
       $.ajax(
             {
                type: "POST",
                url: "profile/friends/add/submit.php",
                data: "FriendsAddDeleteId="+$(this).parents(".BlokProfileFriendsLeft").find("#FriendsAddDeleteId").val(),
                success: function(html)
                      {
                         $(this).parents(".BlokProfileFriendsLeft").animate({opacity: "hide"}, "slow");
                      }
             });
       return false;
    });
});

AJAX запрос происходит, скрипт "profile/friends/add/submit.php" выполняется, а вот прозрачность у текущего родительского элемента не меняется....

Если в строке:

Код: Выделить всё • Развернуть

data: "FriendsAddDeleteId="+$(this).parents(".BlokProfileFriendsLeft").find("#FriendsAddDeleteId").val(),

убрать $(this) то прозрачность изменится...

Я так понимаю это из-за того, что "текущий элемент" из

Код: Выделить всё • Развернуть

$('.BlokProfileFriendsLeft .FriendsAddDelete').click(function()

меняется на

Код: Выделить всё • Развернуть

data: "FriendsAddDeleteId="+$(this).parents(".BlokProfileFriendsLeft").find("#FriendsAddDeleteId").val(),

Но ведь #FriendsAddDeleteId находится внутри .BlokProfileFriendsLeft

Короче HELP =) Уже вторые сутки гуглю...

[Zver]

Код можно было бы и полностью, желательно с html.

[StasB]

JS код (естественно фреймворк JQuery подключен):

Код: Выделить всё • Развернуть

$(document).ready(function()
{
    $('.BlokProfileFriendsLeft .FriendsAddDelete').click(function()
    {
       $.ajax(
             {
                type: "POST",
                url: "profile/friends/add/submit.php",
                data: "FriendsAddDeleteId="+$(this).parents(".BlokProfileFriendsLeft").find("#FriendsAddDeleteId").val(),
                success: function(html)
                      {
                         $(this).parents(".BlokProfileFriendsLeft").animate({opacity: "hide"}, "slow");
                      }
             });
       return false;
    });
});

HTML код:

Код: Выделить всё • Развернуть

<div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete">Отклонить</a>
      <input id="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
    </div>
  </div>
</div>
 

Таких блоков много... Т.е. вся страница может состоять примерно так:

Код: Выделить всё • Развернуть

<div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete">Отклонить</a>
      <input id="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
    </div>
  </div>
</div>

<div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete">Отклонить</a>
      <input id="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
    </div>
  </div>
</div>

<div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete">Отклонить</a>
      <input id="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
    </div>
  </div>
</div>
  

Т.е. нужно чтобы при нажатии на определенный ".FriendsAddDelete" определялся элемент "#FriendsAddDeleteId" в текущем родительском элементе ".BlokProfileFriendsLeft", а затем этот родительский элемент плавно поменял прозрачность...

[Zver]

Верный шаблон:

Код: Выделить всё • Развернуть

<div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete" href="#">Отклонить</a>
    </div>
  </div>
  <input class="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
</div>
 

Верный jQuery:

Код: Выделить всё • Развернуть

$(document).ready(function()
{
    $('.BlokProfileFriendsLeft .FriendsAddDelete').click(function()
    {
       $.post('profile/friends/add/submit.php', { FriendsAddDeleteId: $(this).parent('.BlokProfileFriendsLeft').children('.FriendsAddDeleteId').val() }, function(data)
       {
           $(this).parent('.BlokProfileFriendsLeft').fadeOut();
       }
    
       return false;
    });
});
 

Ошибок много:

1. <input id="FriendsAddDeleteId" .... />. На странице не может быть более одного объекта с одним id.
2. jQuery.find();. При правильном построении шаблона и использование вместе с $(this) его использование невостребованное.
3. Будучи пользуйтесь fireBugом или другим отладчиком javascript.
4. Читайте доки http://docs.jquery.com/

И советую обновиться до jQuery 1.5.

[StasB]

Почему не может быть более одного id ?

Спасибо, работает! (Только я к старой библиотеке как-то уже привык, мне надо то один аякс...)

[Zver]

Почему не может быть более одного id ?

http://softwaremaniacs.org/blog/2006/01 ... ifference/

Спасибо, работает! (Только я к старой библиотеке как-то уже привык, мне надо то один аякс...)

В основном разницы нет. В версии 1.5 полностью переработан ajax. Быстрее и кроссбраузернее. Решать вам.