1


コードを使用すると、恐れています： 

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

私はいつもたくさんのjqueryコードを印刷しなければなりません。

このリンクでコードを見ることができます:
http://jsfiddle.net/hBRNy/2/

問題は、div 文がたくさんあることです。

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


そして、私はそれを印刷したいたびに、< div>ごとにjqueryブロック全体を印刷する必要があります。

誰かが私がこれを解決する方法を知っていますか? jqueryが生成するIDは一意でなければならず、これがより柔軟になることを望んでいましたが、方法がわかりません。

敬具


jqueryワイルドカードを使用して解決策を見つけました（ui.jqueryが機能しなくなるため、IDをクラスに置き換えることはできません：

<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/

4

4 に答える 4

1

class'es自分自身を繰り返す要素にはcssを使用する必要があります。

したがって、このような同じ機能を持つ要素が多数ある場合

したがって、次のようなことができます。

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

そして、これはクラス「my-class」を持つすべての要素に同じ動作をアタッチします

htmlのようなコンテンツを生成するには、handlebars 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>

（これは私の古い投稿を書き直したもので、表示のバグがいくつかあるようです）

于 2012-05-04T18:40:31.390 に答える
1

代わりにクラスを使用し、コードをよりモジュール化して、新しい要素のコードが繰り返されないようにする必要があります。

于 2012-05-04T18:35:55.727 に答える
0

クラスの投稿には同意しますが、文番号を保持する必要がある場合は、HTML 5 データ属性を使用してノードに保存できます。そうすれば、id 属性の重複を心配する必要がなくなり、必要な CSS のフックを引き続き取得できます。

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

以下を使用して、CSS でそれらをすべて選択します。

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

またはjQueryで：

$('div[data-sentence]')

ただし、文番号を保持する必要がない場合は、他の人が述べたようにクラスを使用してください。

于 2012-05-04T20:46:01.843 に答える
0

がんばった :/ 嫌いじゃない

$(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 + ""
            })
        }
    })
})
})
于 2012-11-09T00:52:09.777 に答える