Equivalent function in Javascript from jQuery

Question

$.ajax({
url: 'http://' + window.location.host + '/',
success: function(data){
$(data).find("a:contains(.jpg)").each(function(){
    // will loop through 
    var images = $(this).attr("href");

    $('<p></p>').html(images).appendTo('a div of your choice')

 });
}
});

I couldn't find a way to do the same in javascript, I can make ajax call like this

request = new XMLHttpRequest();
    request.open('GET', 'http://' + window.location.host + '/', true);

    request.onload = function(files) {
        if (request.status >= 200 && request.status < 400){
            // Success!

            resp = request.responseText;
        } else {
            // We reached our target server, but it returned an error

        }
    };
    request.onerror = function() {
        // There was a connection error of some sort
    };

but how do I get the list of the files in the directory?

CSJS and/or SSJS both answers are okay. My main goal is not to use jQuery to accomplish what I want.

What directory are you referring to? Generally you'd use a server side language like PHP, Perl, Java, or Ruby do handle such requests. — Derek
– Derek, Commented Jun 16, 2014 at 8:28
If you have access to the server side code, a good approach would be to send JSON formatted list of files. But if the server sends HTML only, then you could use Regex to extract href attributes. — JustAMartin
– JustAMartin, Commented Jun 16, 2014 at 8:28
I'm guessing the server has directory listing enabled. That means the server responds with HTML listing all files/directories in the requested directory (HTTP resource). This question has nothing to do with AJAX. It's basic JavaScript DOM traversal. stackoverflow.com/search?q=dom+traversal — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jun 16, 2014 at 8:31
@KingKing The only use of html() in his code is html(htmlString): api.jquery.com/html/#html-htmlString — Barmar
– Barmar, Commented Jun 16, 2014 at 8:33
@KingKing and @Barmer .html uses this.empty().append( value ); at the end, jQuery.manipulation:438 — t.niese
– t.niese, Commented Jun 16, 2014 at 8:51

Ven · Accepted Answer · 2014-06-16 09:15:20Z

2

If you want to loop through the a:contains(.jpg) like in your jQuery example, your best bet is probably to use a DocumentFragment and then call .querySelectorAll on it :

var div = document.createElement('div');
div.innerHTML = request.responseText;

// if you want to search using text
var links = div.querySelectorAll('a')
for (i = 0; i < links.length; i++) {
  var link = links[i];
  if (!~link.innerHTML.indexOf('.jpg'))
    continue;
  // found one !
}
// if you want to search using an attribute
var links = div.querySelectorAll("a[href*='.jpg']");

edited Jun 16, 2014 at 9:15

answered Jun 16, 2014 at 8:33

Ven

19k2 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

t.niese Over a year ago

isn't :contains deprecated/removed in css3?

Barmar Over a year ago

Your selector isn't equivalent to the original code. The original searches the text for .jpg, your searches the href. So unless the original code was wrong, this answer isn't right.

Ven Over a year ago

I'd be really surprised if this wasn't what was meant (but yes, it's possible). I edited my answer to add that possibility too

CRQ Over a year ago

I am replacing div.innerHTML = data; the "data" here with "files" I guess? As its what's written in this line request.onload = function(files)

CRQ Over a year ago

@Ven Thanks, also links.lenght should be links.length

|

Ja͢ck · Accepted Answer · 2014-06-16 11:38:10Z

1

You can dump the response text into a newly created <div> and use the standard methods to access the anchors; the following should even work for IE7:

// $(resp)
var doc = document.createElement('div');
doc.innerHTML = resp;

// .find('a')
var anchors = doc.getElementsByTagName('a'), // get all anchors
container = document.getElementById('some_id');

// .filter(":contains(.jpg)")
for (var i = 0; i < anchors.length; ++i) {
    var contents = anchors[i].textContent || anchors[i].innerText || '';

    if (contents.indexOf('.jpg') != -1) {
        // var images = $(this).attr("href");
        // $('<p></p>').html(images).appendTo
        var para = document.createElement('p'),
        text = document.createTextNode(anchors[i].href); 

        para.appendChild(text);
        container.appendChild(para);
    }
}

edited Jun 16, 2014 at 11:38

answered Jun 16, 2014 at 8:44

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

1 Comment

Ja͢ck Over a year ago

@Mehmet Yup, works on IE7 too (unlike querySelectorAll)

Collectives™ on Stack Overflow

Equivalent function in Javascript from jQuery

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related