jquery - Javascript - IP address Show Country - Stack Overflow

admin管理员组

文章数量:1278985

i have a question. i want perline IP address show country use

this html code

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

my 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("/"+ip, function (response) {
$("#country").html(response.country);
}, "jsonp");

result my js ,

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

i want result

192.110.160.11 - US
177.67.82.22 - BR
36.75.102.33 - ID

Thanks for everybody who can help me :D

i have a question. i want perline IP address show country use http://ipinfo.io

this html code

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

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

result my js , http://jsfiddle/p26uE

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

i want result

192.110.160.11 - US
177.67.82.22 - BR
36.75.102.33 - ID

Thanks for everybody who can help me :D

• javascript
• jquery
• geolocation
• ip

Share Improve this question Follow asked Feb 21, 2014 at 16:00 james bondjames bond 11711 silver badge1010 bronze badges 1

• ID's must be unique. You also are only running the code once, you would need to run it once per ip. – Kevin B Commented Feb 21, 2014 at 16:08

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

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

Check this

JSFIDDLE

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 must be unique

you should class instead.

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

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

You are assigning every span the same id, so it is only returning the first span when you select it. Try something like this, since you are already using 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");
});

Hope this helps

You can loop through them. I changed the setup slightly so that it's easier to loop through but you should be able to infer what you need to change.

working JSFiddle

HTML: Put it in a container ul/li just because they're easy to make a list out of

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

    });


});

本文标签： jqueryJavascriptIP address Show CountryStack Overflow