jQuery: Perform action on first match without using each()

Using jQuery, how can I perform this action only on the first item without using each()?  Is there a way I can just use [0]?
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
 $('button').on("click", loadImage);
});

function loadImage() {
    $('#fake-elem-container').contents().filter(function() {
        return this.nodeType == 8;
    }).each(function(i, e) {
        $('#container').append(e.nodeValue);
    });
}

</script>
</head>

<body>

<button>Load the Content!</button>
<br><br>
<div id="fake-elem-container">
    <!--
    1
    -->
    <!--
    2
    -->
    <!--
    3
    -->
</div>
<div id="container"></div>

</body>
</html>

Open in new window

http://jsfiddle.net/wgf5yrz8/
LVL 10
skijAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Is there a way I can just use [0]?
Yes, if your selector matches more than one you can refer to the first one using [0] but you have to wrap it in a $() to access the jQuery functions, or you can simply use the :first  selector
Can do but clumsy
$($('.lotsofitems')[0]).css({backgroundColor: 'red'});

Open in new window

Better
('.lotsofthose:first').css({fontSize: '40px'});

Open in new window

In your case it is more tricky because you are using a filter. I would just do a return false from the .each() this has the same effect
function loadImage() {
    $('#fake-elem-container').contents().filter(function() {
        return this.nodeType == 8;
    }).each(function(i, e) {
        $('#container').append(e.nodeValue);
        return false;
    });
}

Open in new window

skijAuthor Commented:
Is there a simple way to do this without foreach?
Julian HansenCommented:
Yes
Try this
function loadImage() {
    var fakeValue = $('#fake-elem-container').contents().filter(function() {
        return this.nodeType == 8;
    })[0];

    $('#container').append(fakeValue);
}

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

skijAuthor Commented:
Thanks, but it isn't working for me.  Am I doing something wrong?
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
 $('button').on("click", loadImage);
});


function loadImage() {
    var fakeValue = $('#fake-elem-container').contents().filter(function() {
        return this.nodeType == 8;
    })[0];

    $('#container').append(fakeValue);
}

</script>
</head>

<body>

<button>Load the Content!</button>
<br><br>
<div id="fake-elem-container">
    <!--
    1
    -->
    <!--
    2
    -->
    <!--
    3
    -->
</div>
<div id="container"></div>

</body>
</html>

Open in new window

Julian HansenCommented:
It is working but consider what you are doing - you are appending a comment to your container - which is not going to show anything.

Try doing this instead
function loadImage() {

    var fakeValue = $('#fake-elem-container').contents().filter(function() {
        return this.nodeType == 8;
    })[0];

    $('#container').append(fakeValue.data.trim());
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
skijAuthor Commented:
Great, thanks!
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.