可以簡化jQuery代碼，讓我變得更加動態

Question

我怕，當我使用的代碼：

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

，我總是要打印大量的jQuery代碼。

我可以看到這個鏈接的代碼：
http://jsfiddle.net/hBRNy/2/

問題是，會有人很多

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

，每次格句我想要打印它，我必須打印整個jquery塊白色它每隔< div>。

有人知道我可以如何解決這個問題嗎？因爲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」級別的元素

F或像HTML生成的內容，你應該使用類似的車把http://handlebarsjs.com/這讓你定義模板，並將其呈現在JavaScript的

像這樣

<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

我同意類的職位，但如果你確實需要保存th您可以使用HTML 5 data attributes將它們存儲在節點上的句子編號。這樣你就不必擔心重複的id屬性，你仍然可以獲得你需要的CSS鉤子。

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

或jQuery中有：

$('div[data-sentence]') 

但是，如果你並不需要保存語句編號只是去同一個類

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

在CSS與它們全部選中正如其他人所說的。

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