iT邦幫忙

0

HTML ul資料可做點選

  • 分享至 

  • xImage

今天有一個

var result = JSON.parse(result);
for (var i = 0; i < result.length; i++) {
    $("#tree").append(
        $("<ul>").append(
            $('<li>').text(result[i].ChannelID+". "+result[i].Name)
        )
    );
}

資料顯示方式

1. Me
2. You

我想讓輸出後的資料可做點選,那麼我可以怎麼寫?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
淺水員
iT邦大師 6 級 ‧ 2019-03-14 15:49:48
最佳解答

原發問的程式碼要注意一下重複產生 ul 的問題
下面是搭配原生 javascript 的 map,把 result 陣列轉換為 li 元素陣列

$('#tree').append(
    $('<ul>').append(result.map(data=>
            $('<li>').text(data.ChannelID+' '+data.Name).click(function(){
                console.log($(this).text());
            }).get(0)
        )
    )
);

補上比較簡單(沒用 map)的寫法,jQuery 的物件是可以用變數暫存的

let ul=$('<ul>');
for(let i=0;i<result.length;++i){
    let li=$('<li>').text(result[i].ChannelID+' '+result[i].Name);
    li.click(function(){
        console.log($(this).text());
    });
    ul.append(li);
}
$('#tree').append(ul);
看更多先前的回應...收起先前的回應...
Homura iT邦高手 1 級 ‧ 2019-03-14 15:52:27 檢舉

.map()好用

我若是將

$('#tree').append(
    $('<ul>').append(result.map(data=>
        $('<li>').text(data.ChannelID+' '+data.Name).click(function(){
            console.log($(this).text());
        }).get(0)
        )
    )
);

改成

$('#tree').append(
    $('<ul>').append(
        $('<li>').text(data.ChannelID+' '+data.Name).click(function(){
            console.log($(this).text());
        }).get(0)
    )
);

可以嗎?
(目前這樣執行是沒有問題)

淺水員 iT邦大師 6 級 ‧ 2019-03-14 17:00:13 檢舉

可以,只是這邊沒看到你用迴圈,所以不確定重複產生 ul 的問題是不是還在。
你可以用瀏覽器的開發者工具檢查看看是不是只有一個 ul 還是產生一堆 ul ,每個 ul 裡面只有 1 個 li 。

執行出來會是

<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>
 ...

我想順便再問個問題
假如我想在

$('#tree').append(
    $('<ul>').append(
        $('<li>').text(data.ChannelID+' '+data.Name).click(function(){
            console.log($(this).text());
        }).get(0)
    )
);

裡面var channer然後單獨抓data.ChannelID這個值出來的話可以用甚麼樣的function來達成?

我想順便再問個問題
假如我想在

$('#tree').append(
    $('<ul>').append(
        $('<li>').text(data.ChannelID+' '+data.Name).click(function(){
            console.log($(this).text());
        }).get(0)
    )
);

裡面var channer然後單獨抓data.ChannelID這個值出來的話可以用甚麼樣的function來達成?

淺水員 iT邦大師 6 級 ‧ 2019-03-14 17:24:47 檢舉

還是這樣寫對你來說比較順眼呢?

$('#tree').append($('<ul>'));
for(let i=0;i<result.length;++i){
    $('#tree>ul').append(
        $('<li>').text(result[i].ChannelID+' '+result[i].Name).click(function(){
            console.log($(this).text());
        })
    );
}

我個人是認為適當的暫存在變數效能上比較好
減少重新搜索 document 的消耗

淺水員 iT邦大師 6 級 ‧ 2019-03-14 17:35:31 檢舉

要抓 data.ChannelID
jQuery.data() 傳遞資料即可

$('#tree>ul').append(
    $('<li>').text(result[i].ChannelID+' '+result[i].Name)
             .data('cid',result[i].ChannelID)
             .click(function(){
                 console.log($(this).data('cid'));
             }
    )
);

好的,我了解了,非常感謝您/images/emoticon/emoticon41.gif

0
Homura
iT邦高手 1 級 ‧ 2019-03-14 15:34:49

<li>多插入<a>元素就行了

 for (var i = 0; i < result.length; i++) {
      $("#tree").append(
          $("<ul>").append(
              $('<li>').append(
                    $('<a>').attr('href','#'+result[i].ChannelID).text(result[i].ChannelID + ". " + result[i].Name)
          )
        )
      );
  }

我要發表回答

立即登入回答