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?
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

0
skijAuthor Commented:
Is there a simple way to do this without foreach?
0
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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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

0
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

0

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!
0
Julian HansenCommented:
You are welcome.
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.