如何在循环中添加带有新id的新超链接?

时间:2016-11-10 07:22:38

标签: javascript jquery

这是我在这个项目上的第二天:\

我尝试创建的是:在<a>循环中使用新的hrefid属性创建新的for元素,以便我可以获取每个API的输出作为链接。

这是我的JS代码

var one;
var two;
var hoba;

$(document).ready(function() {
  $("#inp").keyup(function() {
    hoba = $(this).val();
  });

  $("#but").on("click", function() {
    var app = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&list=search&titles=Main+Page&rvprop=content&origin=*&srsearch=" + hoba;

    $.getJSON(app, function(data) {
      for (i = 0; i < data.query.search.length; i++) {
        console.log(app);
        one = $("<a></a>").text(data.query.search[i].title);

        //var _href = $("a").attr("href");
        $("a").attr("href", 'https://www.wikipedia.org/wiki/' + data.query.search[i].title);
        $("a").attr("id", data.query.search[i].title);

        two = document.createElement("p");
        two.innerHTML = data.query.search[i].snippet;
        $("body").append(one, two);
      }
    });
  });
});

2 个答案:

答案 0 :(得分:1)

使用相同的对象设置属性

one = $("<a></a>");
one.text(data.query.search[i].title);
one.attr("href", 'https://www.wikipedia.org/wiki/' + data.query.search[i].title);
one.attr("id", data.query.search[i].title); 

使用jQuery( html, attributes )创建HTML元素。

var anchor = $("<a></a>", {
    "text": data.query.search[i].title,
    "href": 'https://www.wikipedia.org/wiki/' + data.query.search[i].title,
    "id": data.query.search[i].title
});

$("body").append(anchor);

&#13;
&#13;
$(document).ready(function() {
  $("#inp").keyup(function() {
    hoba = $(this).val();
  });

  $("#but").on("click", function() {

    var app = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&list=search&titles=Main+Page&rvprop=content&origin=*&srsearch=" + hoba;

    $.getJSON(app, function(data) {
      for (i = 0; i < data.query.search.length; i++) {
        var anchor = $("<a></a>", {
          "text": data.query.search[i].title,
          "href": 'https://www.wikipedia.org/wiki/' + data.query.search[i].title,
          "id": data.query.search[i].title
        });

        var p = $("<p></p>", {
          "html": data.query.search[i].snippet
        });

        $("body").append(anchor);
        $("body").append(p);
      }
    });
  });
});
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您应该对代码进行细微更改,如下所示。

更改代码介于两者之间 //更改代码开始和//更改代码结束

var one;
var two;
var hoba;

$(document).ready(function(){
  $("#inp").keyup(function(){
             hoba = $(this).val();
        });
  $("#but").on("click",function(){

    var app = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&list=search&titles=Main+Page&rvprop=content&origin=*&srsearch="+hoba;

// Changes Code Start

    $.getJSON(app,function(data){
      for(i=0; i<data.query.search.length; i++){
        console.log(app);
        var dataAppend;

    var title = data.query.search[i].title;
    var href = 'https://www.wikipedia.org/wiki/' + data.query.search[i].title;
    var id = data.query.search[i].title;

        dataAppend = "<a href='"+href+"' id='"+id+"'>"+title+"</a>";
        dataAppend += "<p>"+data.query.search[i].snippet+"</p>";

        // \"
        $("body").append(dataAppend);
      }

    });

// Changes Code End

  });
});