HTML ul資料可做點選

javascript

sinceremei 2019-03-14 15:02:43 ‧ 1836 瀏覽

今天有一個

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

直播中

2 個回答

淺水員

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

回應 9
分享
檢舉

看更多先前的回應...收起先前的回應...

Homura iT邦高手 1 級 ‧ 2019-03-14 15:52:27 檢舉

.map()好用

sinceremei iT邦新手 5 級 ‧ 2019-03-14 16:53:00 檢舉

我若是將

$('#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 。

sinceremei iT邦新手 5 級 ‧ 2019-03-14 17:17:03 檢舉

執行出來會是

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

sinceremei iT邦新手 5 級 ‧ 2019-03-14 17:21:14 檢舉

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

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

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

sinceremei iT邦新手 5 級 ‧ 2019-03-14 17:21:16 檢舉

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

$('#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'));
             }
    )
);

sinceremei iT邦新手 5 級 ‧ 2019-03-15 08:47:45 檢舉

好的，我了解了，非常感謝您

登入發表回應

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