时间戳

首页 > 解决方案 > jquery 选择器追加多个 div 而不是每个一个

javascript - jquery 选择器追加多个 div 而不是每个一个

问题描述

我正在尝试使用 jquery 在每个链接上显示链接预览，但实际上我的代码附加了多个 div（正文中的每个链接一个）而不是链接本身的一个。

这里是小提琴： https ://jsfiddle.net/eg4zwpk9/4/

到目前为止我的代码

this.$(".Post-body").find('a').each((i, e) => {

      this.$('.Post-body').attr('id', 'value');

      const isMobile = navigator.userAgentData.mobile;
      let controller = new AbortController();

      let href = e.getAttribute("href");
      console.log(href)

      if (isMobile === false) {
        fetch(`https://preview-api.bbspace.top/?url=` + encodeURIComponent(href), {
          method: "GET",
          mode: "cors",
          signal: controller.signal,
          credentials: "omit"
        })
          .then((res) => res.json())
          .then((response) => {
            console.log(response)

            if (!e.text.startsWith("http")) return;
            let $s = $('#value a')

            let imgResp = '<img class="screenImg" src="' + response.image + '" width="250">';

            if (response.image === undefined) {
              imgResp = '<img class="screenImg" src="https://www.studioippocrate.com/wp-content/uploads/2017/11/pac-404.png" width="250">';
            }


            this.$('#value a').append('<div class="dropdown-prev">\n' +
              '  <button class="dropbtn"><i class="fas fa-search"></i></button>\n' +
              '  <div class="dropdown-content-prev">\n' +
              '    <div class="donContainer">\n' +
              '   ' + imgResp + '' +
              '    <div class="titleDesc">' + response.description + '</div>  ' +
              '  </div>\n' +
              '  </div>\n' +
              '</div>');
          });
      }
    });

我怎样才能只显示每个链接的正确结果？

标签： javascriptjquery

解决方案

您将该预览元素附加到#value 内的所有链接。而不是这个：

            this.$('#value a').append('<div class="dropdown-prev">\n' +
              '  <button class="dropbtn"><i class="fas fa-search"></i></button>\n' +
              '  <div class="dropdown-content-prev">\n' +
              '    <div class="donContainer">\n' +
              '   ' + imgResp + '' +
              '    <div class="titleDesc">' + response.description + '</div>  ' +
              '  </div>\n' +
              '  </div>\n' +
              '</div>');

你必须这样做：

            $(e).append('<div class="dropdown-prev">\n' +
              '  <button class="dropbtn"><i class="fas fa-search"></i></button>\n' +
              '  <div class="dropdown-content-prev">\n' +
              '    <div class="donContainer">\n' +
              '   ' + imgResp + '' +
              '    <div class="titleDesc">' + response.description + '</div>  ' +
              '  </div>\n' +
              '  </div>\n' +
              '</div>');

你已经有了每个给你链接元素的功能。也没有必要将该 id 分配给 .Post-body。

推荐阅读