Question

我有一个问题。我想要perline IP地址显示国家/地区使用http://ipinfo.io

这个HTML代码

<span>192.110.160.11</span><br>
<span>177.67.82.22</span><br>
<span>36.75.102.33</span><br>

我的js

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("<span>(.*?)</span>", "g"),"<span id='ip'>$1</span> - <span id='country'>wait..</span>");

var ip = document.getElementById("ip").innerHTML;

$.get("http://ipinfo.io/"+ip, function (response) {
$("#country").html(response.country);
}, "jsonp");

结果我的js，http://jsfiddle.net/p26uE

192.110.160.11 - US
177.67.82.22 - wait..
36.75.102.33 - wait..

我想要结果

192.110.160.11 - US
177.67.82.22 - BR
36.75.102.33 - ID

感谢所有能帮助我的人：D

Answer 1

$("span").each(function(i){
    var self = this;
    var ip = $(this).text();
    $.get("http://ipinfo.io/"+ip, function (response) {
         $(self).html(ip+"-"+response.country);
    }, "jsonp");
});

检查

JSFIDDLE

Answer 2

Fiddle Demo

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("<span>(.*?)</span>", "g"), "<div><span class='ip'>$1</span> - <span class='country'>wait..</span></div>");

$('.ip').each(function () {
    var $this = $(this);
    $.get("http://ipinfo.io/" + $(this).text(), function (response) {
        $this.closest('div').find('.country').html(response.country);
    }, "jsonp");
});

<小时/> ID必须是唯一的

你应该上课。

阅读Two HTML elements with same id attribute: How bad is it really?

Answer 3

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("<span>(.*?)</span>", "g"),"<span class='country'>$1</span> - <span class='ip'>wait..</span>");

var ips = document.getElementsByClassName("country");

Array.prototype.forEach.call(ips, function(elem) {
    var ipaddress = elem.innerHTML;

    $.get("http://ipinfo.io/"+ipaddress, function (response) {
    $(elem).next().html(response.country);
    }, "jsonp");
});

Answer 4

您为每个范围指定了相同的ID，因此只有在您选择它时才会返回第一个范围。尝试这样的事情，因为你已经在使用jQuery：

$('span').each(function (ele) {
    var currEle = $(this);
    var ip = currEle.text();
    $.get("http://ipinfo.io/" + ip, function (response) {
        currEle.text(ip + " - " + response.country);
    }, "jsonp");
});

希望这有帮助

Answer 5

你可以循环播放它们。我稍微更改了设置，以便更容易循环，但您应该能够推断出需要更改的内容。

工作 JSFiddle

HTML：把它放在容器ul / li中只是因为它们很容易列出

<ul id="ipList" style="list-style:none;">
    <li><span class="ipAddr">192.110.160.11</span><span class="ipProg">Wait...</span></li>
    <li><span class="ipAddr">177.67.82.22</span><span class="ipProg">Wait...</span></li>
    <li><span class="ipAddr">36.75.102.33</span><span class="ipProg">Wait...</span></li>
</ul>

CSS：

.ipProg{
    margin-left: 10px;    
}

JS：

$(function(){
    $("#ipList").children('li').each(function(){        
        var ip = $(this).children('.ipAddr').first();
        var reg = $(this).children('.ipProg').first();

         $.get("http://ipinfo.io/"+ip.text(), function (response) {
             reg.text(response.country);
         }, "jsonp");                    

    });


});

Javascript - IP地址显示国家

5 个答案: