[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Using jQuery to pull out element strings

Posted on 2010-03-26
6
Medium Priority
?
421 Views
Last Modified: 2012-06-21
I have lines like below scattered throughout my markup:
       
<img id="dance_1"  class="video" src="media/dancing1.jpg" onclick="playVideo(irishJig1.flv') />

I want to use jQuery to build an array of the strings passed to the playVideo()  function so I can then preload  all of these videos, one at a time. The JavaScript will be something like

var vids =$('img.video????).get();

where the ??? is something that will look inside the line and pull out the name of the video that that line will play. It's that "something" that I'm not sure of.  It would be easy if I were pulling the value of an attritute in the line, but I'm just looking for a string buried in the line.  

What is the best way to do this with jQuery?

Thanks for any ideas.
0
Comment
Question by:steva
  • 4
  • 2
6 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 28711115
try:
var arr=[];
$(function(){
	$('img.video').each(function(){
		var result = $(this).attr('onclick').match(/([^\)]+)\)$/);
		arr[arr.length]=result[1];
	});
	
	alert(arr);
});

Open in new window

0
 

Author Comment

by:steva
ID: 28726012
Ok.  Thanks. A couple of questions to make sure I understand.

 We're feeding the onclick attribute in  the line to a JavaScript match() function.  (I didn't realize you could drop a JavaScript method  into jQuery code, so I learned something there.)  

So in my example the string we feed to match() would be

                                                playVideo('irishJig1.flv')

(I left the leading single quote off the original statement of the line.)

 From this we want the string  'irishJig1.flv'.

Your regular expression says

            "Take any characters that are not ')', one or more times, all followed by a ')' that ends the line."

The match() method returns the parenthesized portion of the regular expression in element 1, which would just be the 'irishJig1.flv' string and this is put at the end of our global arr array. (So this is like a "push" onto the array?

Did I miss anything?

Thanks for your help.
           
0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 28737420
>> We're feeding the onclick attribute in  the line to a JavaScript match() function
Sorry about that. You need to first convert it to an actual string. match is a method of the String object. So it should have been:

String( $(this).attr('onclick') ).match

As for your explanation of the regex, yes, you got it. However, I assume you don't want the quotations sorrounding the filename. In which case you should use the modified version below.

>>So this is like a "push" onto the array?
Exactly!

>>Did I miss anything?
No, you got good grasp of what was previously posted.

Regards,
Hielo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
var arr=[];
$(function(){
        $('img.video').each(function(){
                var result = String( $(this).attr('onclick') ).match(/\(['"]?([^'"]+)['"]?\)/);
                arr[arr.length]=result[1];
        });
        
        alert(arr);
});
	</script>
</head>
<body>
	<img id="dance_1"  class="video" src="media/dancing1.jpg" onclick="playVideo('irishJig1.flv')"/> 
	<img id="dance_1"  class="video" src="media/dancing1.jpg" onclick="playVideo('irishJig3.flv')"/> 
	<img id="dance_1"  class="video" src="media/dancing1.jpg" onclick="playVideo('irishJig5.flv')"/> 
</body>
</html>

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

Author Closing Comment

by:steva
ID: 31707697
Thanks for your help.  I appreciate it!
0
 

Author Comment

by:steva
ID: 29534354
Hello Hielo,

When you solved my problem a few days ago you did something interesting but which I don't understand,  and which is illustrated in the attached image.   You used ['"] in the regular expression to find the beginning of the file name, that is, single OR double quote mark, though it's clear from the markup that  the videos are always in single quotes.  Why did you include the double quote?

Thanks
match.png
0
 

Author Comment

by:steva
ID: 29534617
Sorry.  Somehow the wrong image go uploaded above .  It should be  this:

RegExp.png
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month10 days, 10 hours left to enroll

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question