Question

我害怕，当我使用代码时：

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

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

我可以看到此链接中的代码：
http://jsfiddle.net/hBRNy/2/

问题是，会有很多div句子

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

每次我想要打印它，我必须为每个＆lt;打印整个jquery块。 DIV＆GT; 即可。

有人知道我怎么能解决这个问题吗？因为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

你应该使用css class'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 data attributes将它们存储在节点上。这样你就不必担心重复的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 + ""
            })
        }
    })
})
})

你能简化jQuery代码，所以我变得更有活力

4 个答案: