为了账号安全,请及时绑定邮箱和手机立即绑定

当现有元素仅具有类,没有ID时,jQuery / Javascript将唯一元素添加到其他元素

当现有元素仅具有类,没有ID时,jQuery / Javascript将唯一元素添加到其他元素

侃侃无极 2021-05-10 17:34:02
Wordpress主题允许站点管理员为每个字段创建包含“描述”的表单。这些描述没有唯一的ID,只有一个通用类:“描述”。他们看起来像这样:<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隐藏了description字段,并尝试了各种方法在'description'类的元素之前或之后添加跨度。预期最终将遍历这些元素中的每一个,我首先尝试仅使用一个字段(第二个使用description类)来成功。这是我进行过多次尝试及其结果的两个示例:尝试#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放置在正确的位置,但是不会呈现HTML,而是仅显示为内联文本,如下所示:<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);        }; });结果:这会正确地将工具提示跨度显示在具有描述类的每个元素之前,但是我试图在其中设置标题属性的标题属性仍然为空(即使向上面的函数添加了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 回答
  • 0 关注
  • 127 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信