JavaScriptを使用してタグ 'a'のリスト値を1つずつ取得します

debugcn 投稿 Dev

Ikr

ここでは手動でタグクラウドを作成します。すべてうまくいっていますが、少し問題があります。以下は私のコードです：

HTML：

    <ul id="tagCloud">
            <li id="tagcloud_li">Item1</li>
                <li id="tagcloud_li">Item2</li>
    </ul>
    <div id="vis">
            <div class="set_texts">

            </div>
     </div>

JavaScript：

         $(function() {
                var liArray = document.getElementsByTagName('li');
                var list_item = [];
                for(var i=0; i < liArray.length ;i++){
                    list_item.push($(liArray[i]).text());
                    var get_item_value = ($(liArray[i]).text());

                    var create_text = $('#vis').find('.set_texts').append($('<a href="" id="tagcloud_list" class="tagcloud_li'+i+'">'));
                    $('#vis').find(".tagcloud_li"+i).text($(liArray[i]).text());
                }
                var count_li = $('#vis').find('#tagcloud_list').length+1;
                for(var i=0; i < liArray.length ;i++){

                        for(var j = 0; j < count_li; j++){

                                   if(i == j){
                                       var get_item_value = ($(liArray[i]).text());
                                       var get_class = $('#vis').find('a').text(get_item_value).append(get_class);
                                    }
                                }
                }
             });

このコードの出力は次のとおりです。

      <a href="" id="tagcloud_list" class="tagcloud_li0" style="font-size:12px;text-decoration:none; color: #FF7600;">Item2</a>
      <a href="" id="tagcloud_list" class="tagcloud_li0" style="font-size:12px;text-decoration:none; color: #FF7600;">Item2</a>

この出力では、両方に値 'Item2'が含まれています。

しかし、最初のタグ「a」で値「item1」を取得し、2番目のタグ「a」で値「item2」を取得したいと思います。

      <a href="" id="tagcloud_list" class="tagcloud_li0" style="font-size:12px;text-decoration:none; color: #FF7600;">Item1</a>
      <a href="" id="tagcloud_list" class="tagcloud_li0" style="font-size:12px;text-decoration:none; color: #FF7600;">Item2</a>

どうすればこれを入手できますか？

マフムード・デガン

HTML：

<ul id="tagCloud">
    <li id="tagcloud_li">Item1</li>
    <li id="tagcloud_li">Item2</li>
</ul>
<div id="vis">
    <div class="set_texts"></div>
</div>

CSS：

.set_text {
    height:500px;
    width:500px;
    background-color:#FFFFFF;
    font-family:Arial;
    border: 1px solid #FFFFFF;
    text-align:left;
}
.tagcloud {
    font-size:12px;
    text-decoration:none;
    color: #FF7600;
}

JS：

$(function () {
    var container = $("#vis").find(".set_texts");
    $("#tagCloud").find('li').each(function (i) {
        $('<a href="" id="tagcloud_list" class="tagcloud tagcloud_li' + i + '"/>').text($(this).text()).appendTo(container);
    });
});

サンプル:(フィドル）

作成されたタグクラウドは単純ですが、それはあなたのコードが行うことです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]