从标题数据 - *的jQuery？ [英] from title to data-* by jQuery?

问题描述

我有一个div元素

 ＆LT; D​​IV CLASS =test2的标题=空白处输入=淡入退出=淡出，scaleOut DUR = 1.2＆GT; blahblahblah＆LT; / DIV＆GT;
 

在魔术jQuery脚本我想，这将是像

 ＆LT; D​​IV CLASS =test2的数据输入=淡入数据出境=淡出scaleOut数据持续时间=1.2称号=空白处输入=淡入退出=淡出，scaleOut DUR = 1.2＆GT;等等等等等等
＆LT; / DIV＆GT;
 

所以，我想这个操纵

 ＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
    $（[标题* ='空间']）。每个（函数（）{
       VAR标题= $（本）.attr（'标题'）;
       变种titleArray = title.split（）;
       $（本）.attr（数据输入，titleArray [1]）;
       $（本）.attr（数据出境，titleArray [2]）;
       $（本）.attr（数据持续时间，titleArray [3]）;
       $（本）.removeAttr（标题）;
    }）;
}）;
＆LT; / SCRIPT＆GT;
 

不过，这并不正常工作，因为我有数据出口=淡出scaleOut具有两个属性，我的剧本是这样的div

 ＆LT; D​​IV CLASS =test2的标题=空间淡入淡出1.2＆GT; blahblahblah＆LT; / DIV＆GT;
 

但我不想要它。
也许你知道在这个例子正确的解决方案。也许有些人觉得还是replaceWith功能将有助于这一点。
谢谢。我希望你明白我的问题。

解决方案

我觉得这是正规的前pressions工作。事情是这样的：

\r

\r

$（[标题* ='空间']）。每个（函数（）{\r
\r
    VAR标题= this.title，\r
        输入= this.title.match（/输入=（*）（\\ S |？$）/）\r
        退出= this.title.match（/退出=（*）（\\ S |？$）/）\r
        持续时间= this.title.match（？/ DUR =（*）（\\ S | $）/）\r
        \r
    $（本）.attr（数据输入，输入[1]）;\r
    $（本）.attr（数据退出，退出[1] .replace（/，/，''））;\r
    $（本）.attr（数据持续时间，持续时间[1]）;\r
    $（本）.removeAttr（标题）;\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT; D​​IV CLASS =test2的标题=空白处输入=淡入退出=淡出，scaleOut DUR = 1.2＆GT; blahblahblah＆LT; / DIV＆GT;

\r

\r

\r

I have a div element

<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>

After magic jQuery script I want that it will be like that

<div  class="test2" data-enter="fadeIn" data-exit="fadeOut scaleOut" data-duration="1.2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" > blahblahblah
</div>

So I tried to manipulate with this

<script>
$( document ).ready(function() {
    $("[title*='space']").each(function() {
       var title = $(this).attr('title');
       var titleArray = title.split(" ");
       $(this).attr("data-enter", titleArray[1]);
       $(this).attr("data-exit", titleArray[2]);
       $(this).attr("data-duration", titleArray[3]);
       $(this).removeAttr('title');
    });
});
</script>

But it doesn't work properly, cause I have data-exit="fadeOut scaleOut" with two properties and my script is for div like that

<div class="test2" title="space fadeIn fadeout 1.2" >blahblahblah</div>

But I don't want it. Maybe you know right solution for this example. Maybe some find or replaceWith function will help for this. Thanks. I hope you understood my question.

解决方案

I think this is job for regular expressions. Something like this:

$("[title*='space']").each(function() {

    var title = this.title,
        enter = this.title.match(/enter=(.*?)(\s|$)/),
        exit  = this.title.match(/exit=(.*?)(\s|$)/),
        duration = this.title.match(/dur=(.*?)(\s|$)/)
        
    $(this).attr("data-enter", enter[1]);
    $(this).attr("data-exit", exit[1].replace(/,/, ' '));
    $(this).attr("data-duration", duration[1]);
    $(this).removeAttr('title');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>

这篇关于从标题数据 - *的jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！