Object doesn't support this property or method
I am having an issue where IE is not working with the following code. The code basically hides a div if elements are empty, you will notice it works in all but IE.
//hide webapp item if empty
if ($("#features").html().trim()) {} else {
$("#f-h").hide()
}
if ($("#applicat开发者_JAVA百科ion").html().trim()) {} else {
$("#a-h").hide()
}
if ($("#tech-specs").html().trim()) {} else {
$("#t-h").hide()
}
if ($("#downloads").html().trim()) {} else {
$("#d-h").hide()
}
if ($("#custom-field").html().trim()) {} else {
$("#c-f").hide()
}
The pages to see it in action is webpage
Any hints to why ie doesnt like this or a better method would be appreciated.
My guess is that Internet Explorer is parsing the lines differently, resulting in an error. The solution to this is to always use semicolons to mark the ends of your lines. I also cleaned up the code a bit, replacing the empty if/else blocks with if-nots.
//hide webapp item if empty
if (!$("#features").html().trim()) {
$("#f-h").hide();
}
if (!$("#application").html().trim()) {
$("#a-h").hide();
}
if (!$("#tech-specs").html().trim()) {
$("#t-h").hide();
}
if (!$("#downloads").html().trim()) {
$("#d-h").hide();
}
if (!$("#custom-field").html().trim()) {
$("#c-f").hide();
}
jQuery html()
method just returns a string containing the HTML.
JavaScript strings don't have a trim()
method.
If you want to introduce one to the javascript's String object. You can do so with:
String.prototype.trim = function () {
return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
^^^ didn't test this, but I am pretty sure it will do the job.
You could probably greatly simplify your JavaScript depending on the structure of your HTML. If the elements you wanted to hide were positioned consistently near/next to each other, you could assign classes to the sections ("features", "application", "tech-specs", etc.), e.g. "section", and the elements you wish to hide ("f-h", "a-h", "t-h", etc.), e.g. "hide-me", and use a single function to do the work:
$('.section').each(function() {
if ($(this).is(':empty')) {
$(this).closest('.hide-me').hide();
}
});
I don't necessarily love this solution, but you could also use a map of the sections you want to test and hide if they are in random places in your HTML:
var items = [
{ key: '#features', value: '#f-h' },
{ key: '#application', value: '#a-h' },
{ key: '#tech-specs', value: '#t-h' },
{ key: '#downloads', value: '#d-h' },
{ key: '#custom-field', value: '#c-h' }
];
$.each(items, function(index, element) {
if ($(element.key).is(':empty')) {
$(element.value).hide();
}
});
Here's a working example of the above code.
I know this doesn't answer your question but I just wanted to give my $0.02.
精彩评论