求助JS大神！如何给指定JS加样式~

独行剑侠

已解决，感谢诸位大神！
--------------------------刚刚接触js的新手，好多地方不懂，求大神不吝啬指点。


左侧为目前的，右侧试想要的最终效果



这是JS

[JavaScript] 纯文本查看 复制代码

$(function() {
    $.getJSON("js/data.json", function(data) {
        $.each(data, function(i, item) {
            let tag = '<li class="title"><svg class="icon" aria-hidden="true">';
            let icon = '<use xlink:href="#' + item.icon + '"></use>';
            let addList = tag + icon + '</svg> ' + item.title + '</li>';
            $('.list ul').append(addList);
            $.each(item.node, function(i, item) {
                let url = '<li><a rel="nofollow" href="' + item.url + '" target="_blank"' + '" class="tooltip">';
                let icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + item.icon + '"></use>';
                let href = '<use xlink:href="#' + item.icon + '"></use>';
                let addList = url + icon + '</svg>' + item.text + '<span class="tooltiptext">' + item.prompt + '</span>' + '</a></li>';
                $('.list ul').append(addList)
            })
        });
     });
});

HULANG-BTB

这获取是你需要的，改动之处在12行

[JavaScript] 纯文本查看 复制代码

$(function () {
  $.getJSON("js/data.json", function (data) {
    $.each(data, function (i, item) {
      let tag = '<li class="title"><svg class="icon" aria-hidden="true">';
      let icon = '<use xlink:href="#' + item.icon + '"></use>';
      let addList = tag + icon + "</svg> " + item.title + "</li>";
      $(".list ul").append(addList);
      $.each(item.node, function (i, item) {
        let url = '<li><a rel="nofollow" href="' + item.url + '" target="_blank"' + '" class="tooltip">';
        let icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + item.icon + '"></use>';
        let href = '<use xlink:href="#' + item.icon + '"></use>';
        let addList = '<div class="panel">' + url + icon + "</svg>" + item.text + '<span class="tooltiptext">' + item.prompt + "</span>" + "</a></li></div>";
        $(".list ul").append(addList);
      });
    });
  });
});

as51271239

[JavaScript] 纯文本查看 复制代码

$('.title').after('<div></div>')

独行剑侠

HULANG-BTB 发表于 2021-7-26 17:41
这获取是你需要的，改动之处在12行
[mw_shl_code=javascript,true]$(function () {
  $.getJSON("js/data ...

这个不对
这个给<li>...</li>都加了DIV
成了
<div><li>...</li></div>
<div><li>...</li></div>
<div><li>...</li></div>

独行剑侠

as51271239 发表于 2021-7-26 17:46

啊……这…… 说实话，没看懂，

幻影殇魂

[JavaScript] 纯文本查看 复制代码

$(function () {
    $.getJSON("js/data.json", function (data) {
        $.each(data, function (i, item) {
            let tag = '<li class="title"><svg class="icon" aria-hidden="true">';
            let icon = '<use xlink:href="#' + item.icon + '"></use>';
            let addList = tag + icon + "</svg> " + item.title + "</li>";
            $(".list ul").append(addList);
            $.each(item.node, function (i, item) {
                let url = '<li><a rel="nofollow" href="' + item.url + '" target="_blank"' + '" class="tooltip">';
                let icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + item.icon + '"></use>';
              let href = '<use xlink:href="#' + item.icon + '"></use>';
              let panStart = '<div class="panel">';
              let panEnd = "</div>";
                let addList = panStart + url + icon + "</svg>" + item.text + '<span class="tooltiptext">' + item.prompt + "</span>" + "</a></li>" + panEnd;
                $(".list ul").append(addList);
            });
        });
    });
});

HULANG-BTB

独行剑侠 发表于 2021-7-26 17:53
这个不对
这个给...都加了DIV
成了

可以试试这个

[JavaScript] 纯文本查看 复制代码

$(function () {
  $.getJSON("js/data.json", function (data) {
    $.each(data, function (i, item) {
      let tag = '<li class="title"><svg class="icon" aria-hidden="true">';
      let icon = '<use xlink:href="#' + item.icon + '"></use>';
      let addList = tag + icon + "</svg> " + item.title + "</li>";
      $(".list ul").append(addList);
      let div = '<div class="panel">';
      $.each(item.node, function (i, item) {
        let url = '<li><a rel="nofollow" href="' + item.url + '" target="_blank"' + '" class="tooltip">';
        let icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + item.icon + '"></use>';
        let href = '<use xlink:href="#' + item.icon + '"></use>';
        let li = url + icon + "</svg>" + item.text + '<span class="tooltiptext">' + item.prompt + "</span>" + "</a></li>";
        div += li;
      });
      div += "</div>";
      $(".list ul").append(div);
    });
  });
});

zhy10086

从图片效果来看，<li>标签与<div>标签是不能同级的。
<div>标签要么放到<li>标签里面，
要么把<ul></ul>放到<div></div>里面。
如果是想分组，直接并列多个<ul></ul>就可以，在用<div>将他们包裹在一起

幻影殇魂

幻影殇魂 发表于 2021-7-26 17:55
[mw_shl_code=javascript,true]
$(function () {
    $.getJSON("js/data.json", function (data) {

第12到第13，不过我看上面已经有人写了和我相同的代码，我编辑完提交后看到别人已经写好啦，我和他们写的是一样的

独行剑侠

幻影殇魂 发表于 2021-7-26 17:55
[mw_shl_code=javascript,true]
$(function () {
    $.getJSON("js/data.json", function (data) {

大神，您这也不对，
这个给<li>...</li>都加了DIV
成了
<div><li>...</li></div>
<div><li>...</li></div>
<div><li>...</li></div>


不是我想要的
<div class='panel'>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</div>