jquery - 你能简化 jQuery 代码吗，让我变得更有活力

Question

恐怕，当我使用代码时：

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

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

我可以在这个链接中看到代码：http:
//jsfiddle.net/hBRNy/2/

问题是，会有很多 div 语句

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

每次我想打印它时，我都必须为每个< 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>

如果你想玩它，我已经更新了代码
http://jsfiddle.net/hBRNy/16/

Answer 1

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

Answer 2

您应该将 cssclass'es用于重复它们自身的元素。

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

所以你可以做这样的事情：

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

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

要生成像 html 这样的内容，您应该使用把手http://handlebarsjs.com/这样的东西，这可以让您定义模板并在 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>

（它重写了我的旧帖子，我看到有一些显示错误）

Answer 3

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

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

在 CSS 中选择它们：

div[data-sentence] { foo: bar; }

或在 jQuery 中：

$('div[data-sentence]')

但是，如果您不需要保留句子编号，只需使用其他人提到的课程即可。

Answer 4

尽我所能：/不讨厌

$(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 + ""
            })
        }
    })
})
})