你能简化jQuery代码吗，这样我就变得更有活力了

恐怕，当我使用代码时：

<div id="sentence_xx"></div> 

我总是要打印很多jquery代码。

我可以在这个链接中看到代码：


问题是，会有很多div语句

<div id="sentence_xx"></div>

每次我想要打印它时，我都必须为每个

打印整个jquery块

有人知道我怎么解决这个问题吗？因为jquery生成的id必须是唯一的，我希望这可以更灵活，但不知道如何实现

问候

---

我通过使用jquery通配符找到了一个解决方案（您不能用类替换id，因为ui.jquery将不再工作：

<script>
    $(document).ready(function() {
    // For everey id, started with sentence_  (the sentences which I want)
    $('[id^=sentence_]').each(function() {

    // strip the id until i have the number only (sentence_ is a static value)
    var currentId = $(this).attr('id');
    var toRemove = "sentence_";
    var id = currentId.replace(toRemove,'');

    //replace all the characters by "</li> <li class=\"ui-widget-content_"+id+"\">"
    var text = $("#"+currentId).text().trim().split("").join("</li> <li class=\"ui-widget-content_"+id+"\">");
    $("#"+currentId).html("<li class=\"ui-widget-content_"+id+"\">" + text + "</li>");

    //create a <ol> after the div selectable_xx
    $('<ol class="selectable_style" id="selectable_'+id+'"></ol>').insertAfter("#"+currentId);

    // remove the value of the div and place them into the <ol>
   $('.ui-widget-content_'+id+'').clone().appendTo("#selectable_"+id);
    $('#sentence_'+id).remove();

    //replace all the " " by non breaking spaces 
    $('#selectable_'+id+' li').each(function() {
      $(this).html($(this).text().replace(' ', '&nbsp;'));
    });


     //attache the function for selecting items and put the character place into the next span
        $( "#selectable_"+id ).selectable({
            stop: function() {
                var woord ="" ;
                var result = $( "#selectable_"+id ).next('span').empty();
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable_"+ id +" li" ).index( this );
                    result.append( " #" + ( index + 1 ) );
                    letter = index + 1;
                    woord += letter+'';
                });

                }
            });
        });     
    });
</script>

$（文档）.ready（函数（）{
//对于everey id，从句子（我想要的句子）开始
$（'[id^=句子]）。每个（函数（）{
//去掉id，直到我只有数字（句子是静态值）
var currentId=$（this.attr（'id'）；
var toRemove=“句子”；
var id=当前id.replace（删除“”）；
//将所有字符替换为“
”
var text=$（“#”+currentId）.text（）.trim（）.split（“”）。join（“
”）；
$（“\”+currentId）.html（“
“+text+”
”）；
//在div可选_xx之后创建一个
$（“”）.insertAfter（“#”+currentId）；
//删除div的值并将其放入
$（'.ui-widget-content_'+id+''）.clone（）.appendTo（“#可选_'+id”）；
$（'#句子'+id）.remove（）；
//将所有“”替换为不间断空格
$（'#可选的'+id+'li'）。每个（函数（）{
$（this.html（$（this.text（）.replace（''）；
});
//附加用于选择项目的函数，并将字符放置到下一个跨距中
$（“#可选的”+id）。可选({
停止：函数（）{
var woord=“”；
var result=$（“#可选#”+id）.next（'span'）.empty（）；
$（“.ui已选定”，此）.each（函数（）{
var指数=$（“#可选#”+id+“li”）。指数（本）；
结果。追加（“#”+（索引+1））；
字母=索引+1；
woord+=字母+“”；
});
}
});
});     
});

如果你想玩它，我已经更新了代码

---

您应该改用类，并尝试使代码更加模块化，以避免对新元素重复代码。

您应该使用css

类

对重复它们自身的元素

因此，如果有许多元素具有与此相同的功能

<a href="{{url}}">{{name}} </a>

所以你可以这样做：

$(".my-class").html("<a href='#'>Me!</a>");

$（“.my class”）.html（“”）；

这将对类为“my class”的所有元素附加相同的行为

为了生成像html这样的内容，您应该使用像Handlebar这样的东西，这允许您定义模板并在javascripts中呈现它们

像这样的

<a href="{{url}}">{{name}} </a>

变成这样

(for var object = {name: "my blog", url: "http://no-idea.com"})

<a href="http://no-idea.com">my blog</a>

（对于var对象={name:“我的博客”，url:“http://no-idea.com"})

---

（这是我以前写的帖子，我看到有一些显示错误）

我同意类帖子，但如果你确实需要保留句子编号，你可以使用将它们存储在节点上。这样你就不必担心重复的id属性，你仍然可以获得你需要的CSS挂钩

<div data-sentence="xx"></div>

或者在jQuery中使用：

$('div[data-sentence]')

---

但是，如果你不需要保留句子编号，只需像其他人提到的那样去上课。

尽了我最大的努力：/no hating

$(document)
.ready(function () {
$("[id^=sentence_]")
    .each(function () {
    var a = $(this)
        .attr("id"),
        b = "sentence_",
        c = a.replace(b, ""),
        d = $("#" + a)
            .text()
            .trim()
            .split("")
            .join('</li> <li class="ui-widget-content_' + c + '">');
    $("#" + a)
        .html('<li class="ui-widget-content_' + c + '">' + d + "</li>"), $('<ol class="selectable_style" id="selectable_' + c + '"></ol>')
        .insertAfter("#" + a), $(".ui-widget-content_" + c + "")
        .clone()
        .appendTo("#selectable_" + c), $("#sentence_" + c)
        .remove(), $("#selectable_" + c + " li")
        .each(function () {
        $(this)
            .html($(this)
            .text()
            .replace(" ", "&nbsp;"))
    }), $("#selectable_" + c)
        .selectable({
        stop: function () {
            var a = "",
                b = $("#selectable_" + c)
                    .next("span")
                    .empty();
            $(".ui-selected", this)
                .each(function () {
                var d = $("#selectable_" + c + " li")
                    .index(this);
                b.append(" #" + (d + 1)), letter = d + 1, a += letter + ""
            })
        }
    })
})
})

$（文档）
.ready（函数（）{
$（“[id^=句子]”）
.每个（功能）{
变量a=$（此）
.attr（“id”），
b=“句子”，
c=a.替换（b，“”，
d=$（“#”+a）
.text（）
.trim（）
.拆分（“”）
.join（“
）；
$（“#”+a）
.html（“
“+d+”
”，$（“”）
.insertAfter（“#”+a），$（“.ui-widget-content”+c+”）
.clone（）
.附于（“#可选#”+c），$（#句#+c）
.remove（），$（“可选的”+c+“li”）
.每个（功能）{
$（本）
.html（$（此）
.text（）
.替换（“，”））
})，$（“可选的”+c）
.可选({
停止：函数（）{
var a=“”，
b=$（“#可选#”+c）
.next（“span”）
.empty（）；
$（“.ui已选定”，此项）
.每个（功能）{
变量d=$（“#可选#”+c+“li”）
.索引（本）；
b、 附加（#“+（d+1）），字母=d+1，a+=字母+“”
})
}
})
})
})

属于：codereview.stackexchange.com