Помогите с jquery выбрать правильный элемент

Question

У меня есть следующий HTML:

<div class="result-row odd">
 <div class="domain-name">first-domain.com</div>
 <div class="domain-functions">
  <a onclick="deleteDomain(1)" href="javascript:void(0);">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a onclick="editDomain(1)" href="javascript:void(0);">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

    <div class="result-row even">
 <div class="domain-name">second-domain.com</div>
 <div class="domain-functions">
  <a onclick="deleteDomain(2)" href="javascript:void(0);">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a onclick="editDomain(2)" href="javascript:void(0);">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

Я хотел бы заменить first-domain.com на поле ввода при нажатии кнопки редактирования ...

У меня естьполучил это до сих пор:

function editDomain() {
    $('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>');
}

Это меняет все мои названия - Какой лучший способ заменить только правильный заголовок?

Answer 1

Сначала переключите ваш HTML, чтобы использовать классы для ссылок, и удалите встроенные обработчики событий.

<div class="result-row odd">
 <div class="domain-name">first-domain.com</div>
 <div class="domain-functions">
  <a class="deleteDomain" href="#delete1">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a class="editDomain" href="#edit1">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

Затем используйте привязку событий jQuery, используя метод .closest(), чтобы изолировать ваше .html() изменение в соответствующем поле.

$(function(){
  $('.editDomain').click(function(){
    $(this).closest('.result_row').find('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>');

    return false;
  });
  $('.deleteDomain').click(function(){
    return false;
  });
});

Answer 2

Сначала я предлагаю вам внести некоторые изменения в ваш HTML-код

 <div class="result-row odd" id="0">
 <div class="domain-name">first-domain.com</div>
 <div class="domain-functions">
  <a id="delete">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a id="edit">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

<div class="result-row even" id="1">
 <div class="domain-name">second-domain.com</div>
 <div class="domain-functions">
  <a id="delete">
   <img height="24" width="24" alt="48x_delete" src="images/48x_delete.png">
  </a> 
  <a id="edit">
   <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
  </a>
 </div>
</div>

Вы можете добавить метод щелчка для каждого полученного вами div следующим образом

$('div[class^=result-row]').find('div a[id="delete"]').click(function(){
        $(this).closest().remove();
});

Вы можете сделать то же самоес помощью функции редактирования добавьте клик к каждому div id = "edit"

$('div[class^=result-row]').find('div a[id="edit"]').click(function(){
        $(this).closest().find('.domain-name').html("yourCustomHTMLHere");
});

Answer 3

Применение изменений к элементам, если они у вас есть, требует только следующего. Не совместим с IE, но может быть сделано так. Вам нужен брат элемента, который был нажат. В качестве альтернативы вы можете (и, вероятно, должны) связать событие click после загрузки страницы. Посмотрите на ненавязчивый JavaScript, чтобы узнать, почему это лучше.

<a onclick="editDomain()" href="javascript:void(0);">
 <img height="24" width="24" alt="48x_delete" src="images/48x_editwebpage.png">
</a>

function editDomain(e) {
  $(e.srcElement).siblings('.domain-name').html('<input class="inline" type="text"/><input class="inline" type="button" value="save"/>');
}