jQuery / Javascript добавляет уникальный элемент к другим элементам, когда у существующих элементов есть только классы, без идентификаторов - PullRequest
Новая
       9

jQuery / Javascript добавляет уникальный элемент к другим элементам, когда у существующих элементов есть только классы, без идентификаторов

0 голосов
/ 11 мая 2019

Тема Wordpress позволяет администратору сайта создавать формы, содержащие «описание» для каждого поля.Описания не имеют уникальных идентификаторов, только общий класс: «описание».Они выглядят так: 

<div class="field-head"><label for="name">Your name</label><small class="description">A unique description for this field.</small></div>

Вместо того, чтобы отображать эти описания встроенными в каждую метку поля, как это делает тема, я скрываю класс описания с помощью CSS (display: none;) и пытаюсь создать диапазону него есть описание в качестве свойства title, так что jQuery будет отображать его как всплывающую подсказку при наведении курсора.

Это то, что я желаю: 

<div class="field-head"><label for="name">Your name</label><span class="tipwrapper" title='A unique description for this field.'>Hover for a tip</span><small class="description">A unique description for this field.</small></div>

Я успешно скрыл поле описания с помощью CSS и пробовал различные способы добавления диапазона до или после элемента с описанием.учебный класс.В ожидании того, что в конечном итоге я буду повторять каждый из этих элементов, я сначала пытаюсь добиться успеха только с одним полем (второе с классом описания.) Вот два примера из множества попыток, которые я предпринял, и их результаты:

Пример попытки # 1: 

  jQuery(document).ready(function($){
if (jQuery(('.field-head')[1]) ){
  var tiptext = $('.field-head .description')[1].innerHTML;
  var txt1 = '<span class="tipwrapper">'+tiptext+'</span>';
  $('.field-head .description')[1].before(txt1); 
};
});

РЕЗУЛЬТАТ: Это помещает HTML-код в правильное место, но он не отображается и отображается только как встроенный текст, напримерthis: 

<span class="tipwrapper">A unique description for this field.</span>

Пример попытки №2:

(где я сначала пытаюсь создать всплывающие подсказки, затем задаю их названия): 

jQuery(document).ready(function($){
  var txt1 = "<span class='tipwrapper' title=''>Hover for a tip</span>";                   
  $('.field-head .description').before(txt1);
  });
jQuery(document).ready(function($){
     if (jQuery(('.field-head')[1]) ){
var classLength = $('.field-head .description').length;
   var tiptext = $('.field-head .description')[1].innerHTML;
   $(('.field-head .tipwrapper')[1]).attr('title', tiptext);
        };
 });

RESULT: Это правильно отображает интервалы всплывающей подсказки перед каждым элементом с классом описания, но атрибут title, где я пытаюсь его установить, остается пустым (даже если добавление alert (tiptext) в функцию выше подтверждает, что переменнаяправильно получить текст описания. Полученный HTML-код выглядит следующим образом. 

<div class="field-head"><label for="name">Your name</label><span class="tooltip" title=''>Hover for a tip</span><small class="description">A unique description for this field.</small></div>

Как установить html из элемента в качестве атрибута 'title' нового элемента?перед этим?

1 Ответ

1 голос
/ 11 мая 2019

Вот решение, которое использует .replaceWith() для замены исходного элемента small новым span.

Цикл .each()используется для итерации всех элементов .field-head.

См. комментарии в коде. 

$(".field-head").each(function() {

  // Get the small element in each field-head and get its text
  var small = $(this).find("small")
  var description = small.text();

  // create a span element...
  var span = $("<span>").addClass("tipwrapper").text("Hover for a tip");
  // And set the title.
  span.attr("title", description);

  // Replace the small with the new span
  small.replaceWith(span);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="field-head"><label for="name">Your name</label><small class="description">A unique description for this field.</small></div>
...