Как обновить некоторую часть jquery заголовка td

#javascript #jquery

Вопрос:

после успеха ajax я должен обновить некоторую часть заголовка.

Я извлекаю текущее название td как:

 //with this I could get the current td title
let tdTitle = $('.amenity-review-table').find("td[data-unitid='" resp.unit.id "']").attr('title');
 

и утешительный этот заголовок дает:

 <div class='unit-title'><strong>Unit: 101</strong></div><span class=''>Washer/Dryer = <span>1</span></span></br><div class='sm-box unit-note-color d-inline-block'></div><span class='unit-note-popup'>note added 3</span>
 

Теперь, после успеха ajax, я получу новое обновленное название, и к нему можно будет получить доступ через:
resp.unit.unit_note , теперь, как только я получу обновление, я должен обновить заметку, показанную в названии td. Итак, в приведенном выше случае:

Я должен обновить текст внутри unit-note-popup класса до новой заметки, которую можно было бы получить resp.unit.note . Таким образом, окончательное название выглядит так:

 <div class='unit-title'><strong>Unit: 101</strong></div><span class=''>Washer/Dryer = <span>1</span></span></br><div class='sm-box unit-note-color d-inline-block'></div><span class='unit-note-popup'>" resp.unit.unit_note "</span> //my syntax could be wrong here, but this is what I needed
 

Обновить:
Вот jsfiddle для воспроизведения сценария:

http://jsfiddle.net/a3t7yfe2/1/

Комментарии:

1. Вы хотите сказать title , что атрибут содержит HTML?

2. да, я имею в виду этот атрибут заголовка

3. Является unit-note-popup ли уникальным атрибутом класса? Потому что это то, чего вы в основном хотите, уникальный способ определить элемент, который вы хотите выбрать.

Ответ №1:

Вам нужно будет разобрать HTML-код в title атрибуте на то, с чем вы можете работать (например jQuery , с объектом).

Затем вы можете манипулировать .unit-note-popup текстом и записывать HTML обратно в атрибут

 // Mock data
const resp = {
  unit: {
    id: 1,
    note: "Note added 4!"
  }
}

const td = $(`.amenity-review-table td[data-unitid="${resp.unit.id}"]`)
const title = td.attr("title")

const titleEl = $(`<div>${title}</div>`) // parse into an element

titleEl.find(".unit-note-popup").text(resp.unit.note)

td.attr("title", titleEl.html()) 
 /* Make the title attribute visible */
td[data-unitid]:after {
  display: block;
  color: red;
  content: attr(title);
  margin: 1rem;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="amenity-review-table">
  <tr>
    <td data-unitid="1" title="<div class='unit-title'><strong>Unit: 101</strong></div><span class=''>Washer/Dryer = <span>1</span></span><br/><div class='sm-box unit-note-color d-inline-block'></div><span class='unit-note-popup'>note added 3</span>">
      Check out my super awesome HTML title
    </td>
  </tr>
</table> 

Здесь я завернул title HTML-текст в a <div> так, чтобы он был инкапсулирован в один родительский элемент. Таким образом, вы можете вернуть внутренний HTML-код для записи нового значения.

Комментарии:

1. Я не знаю, что не так в моем случае, но я не могу заставить это работать, не могли бы вы, пожалуйста, проверить этот jsfiddle? jsfiddle.net/a3t7yfe2/1 и сделайте его обновленным с новым названием после нажатия кнопки

2. моя вина, что это было из-за опечатки идентификатора единицы вместо идентификатора единицы