Why does this piece of code always return "no_conflict"?

Question

I wrote a method as follows:

detectNameConflict: function() {
    var existing_filenames = this.element.find('ul.existing_files > li');
    if (existing_filenames.length > 0) {
        var try_name = this.element.find('div.target_filename').text().trim();
        existing_filenames.each(function(index, el) {
            if ($(el).text() == try_name) {
                return "contain_conflict";
            }
        });
    } else {
      return "no_conflict";
    }
},

This code doesn't work, because it always returns "no_conflict", even when there is a naming conflict.

note: this.element is from jQueryUI widget factory. It refers to the DOM element on which the widget instance attached.

Answer 1

You can convert the jQuery collection into an array, then use the Javascript some() method to test if any of them match try_name.

detectNameConflict: function() {
    var try_name = this.element.find('div.target_filename').text().trim();
    var existing_filenames = this.element.find('ul.existing_files > li').toArray();
    if (existing_filenames.some(function(el) {
        return $(el).text() == try_name;
    })) {
        return "contain_conflict";
    } else {
        return "no_conflict";
    }
}