Question

在这里，我将手动制作一个标签云。一切顺利，但我遇到了一个小问题。以下是我的代码：

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'，在第二个标签'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>

我怎么能得到这个？

Answer 1

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);
    });
});

Sample: (Fiddle)

创建的代码云很简单，但它是您的代码所做的。

Answer 2

您的代码非常复杂，因此您无法确定这一点。即，

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+'" style="font-size:12px;text-decoration:none; color: #FF7600;">'));
    $('#vis').find(".tagcloud_li"+i).text($(liArray[i]).text());
}

可能会减少到这个：

$("li").each(function() {
    var item = $(this);
    var text = item.text();

    $('<a href="" class="tagcloud_list" id="tagcloud_li'+i+'" style="font-size:12px;text-decoration:none; color: #FF7600;">')
        .text( text )
        .appendTo( $('#vis').find('.set_texts') );
});

此循环的示例是从DOM中多次获取相同的信息，并在其中一种情况下删除它。通过性能，这是昂贵的。接下来你可能会改变添加<a>的方式，这样你就不需要先将它添加到目标容器中，只是为了得到一个后来给它回复的查询。

结果<a>都使用相同的ID，这也是不好的。所以尝试交换类和ID。

根据您的问题，此代码似乎至关重要：

var get_class = $('#vis').find('a').text(get_item_value).append(get_class);

在您的目标中找到所有<a> ，将单个文本分配给所有。

Answer 3

将您的Javascript更改为此..我使用了Jquery ..

$(document).ready(function(){
  var liArray = $("li");
  var i;
  for(i=0;i < liArray.length;i++){
    $("div.set_texts").append('<a href="" id="tagcloud_list" class="tagcloud_li'+i+'" style="font-size:12px;text-decoration:none; color: #FF7600;">' + liArray[i].innerHTML + '</a>'); 
  }
  });

获取标记中的列表值＆＃39; a＆＃39;一个接一个地使用JavaScript

3 个答案: