如果在其中添加空格，为什么不能正常工作？

Question

So I'm making a theme for a blogging platform and I have only template editing access to it(means I cannot control the content coming from the server).I want to remove duplicate I want to remove duplicate images from the blog post page.Here is the code

it is working fine if the alt tag has no spaces

<p>Alt with Spaces.Works fine!</p>

http://jsfiddle.net/mixin/mB7mz/2/

Doens't work if the alt contains spaces http://jsfiddle.net/mixin/G27fk/

What's the problem here?

Answer 1

chnage single quote of alt property to double

 try following 

function postHeaderImage(){
            headerImage = $('#post-header img').attr('alt');

            $('#post-content img').each(function() {
                postContentImage = $(this).attr('alt');

                if(postContentImage == headerImage){
                    $("#post-content img[alt='"+ postContentImage+"']").remove();
                }
            });
        }

Answer 2

Your selector points to a different id.

http://jsfiddle.net/G27fk/4/

Try this one:

$('#post-content img').each(function() {

Answer 3

The problem was the way you removed the duplicate images, there is a more elegant way to do so. I updated your JSFiddle to a working example: http://jsfiddle.net/mB7mz/3/

$(document).ready(function(){

    function postHeaderImage(){
        headerImage = $('#post-header img').attr('alt');
        $('#post-content img').each(function() {
            postContentImage = $(this).attr('alt');
            if(postContentImage == headerImage){
                $(this).remove();
            }
        });
    }

    postHeaderImage();

});

Answer 4

There are 2 problems.

• One the id used in the second code is mismatched
• Attribute selector is case sensitive alt & Alt in the value

So

$(document).ready(function () {

    function postHeaderImage() {
        var headerImage = $('#header-image img').attr('alt');
        $('#post-content img[alt="' + headerImage + '"]').remove();
    }

    postHeaderImage();

});

Demo: Fiddle

---

If you want case insensitive search then

$(document).ready(function () {
    function postHeaderImage() {
        var headerImage = $('#header-image img').attr('alt').toLowerCase();
        $('#post-content img[alt]').filter(function () {
            return $(this).attr('alt').toLowerCase() == headerImage;
        }).remove();
    }

    postHeaderImage();
});

Demo: Fiddle