Find attribute and element from var with jquery?

Question

I have innerHTML in variable which is get as follows:

 var mash = e.currentTarget.innerHTML;

and Now mash has following values:

"<div class="mashup-details-view">    <div class="mashup-item" data-mashup-id="36967" id="mashup-sort-id">         <div class="mashup-thumbnail" title="Cist">          <span class="x-small thumbnail" style="min-width: 60px; min-height: 34px;"><img onerror="javascript:vidizmo.app.utils.handle_thumbnail_error(this);" src="http://az2213.vo.msecnd.net/vidizmodev/001419/081358/Images/00000c/ImgThumbs/Copa_67100313-4f60-46ff-95c1-907c75b077a8_th1.jpg"></span> </div> <div class="IconDescDiv">     <div class="TitleClass" href="#" title="Cist">Cist</div> </div> </div></div> "

Now i need to get "data-mashup-id" attribute , img tag and class="TitleClass" element how can i get them from variable i am trying to get it via find('img') but cant get it. Please any body can figure this out???

do you really need to create the mash variable? its value is not a valid string as you listed. just use .prop to get the attributes you need. — chrisvillanueva
– chrisvillanueva, Commented Jun 26, 2013 at 6:32

T.J. Crowder · Accepted Answer · 2013-06-26 07:51:37Z

3

Don't use innerHTML for this. innerHTML generates a string representation of the elements. You want to work directly with the elements.

First, get a jQuery wrapper around the current target:

// `mash` is a jQuery wrapper around the current target
var mash = $(e.currentTarget);

Now you can use CSS selectors to find content within the target and retrieve information from it.

Getting the data-mashup-id value:

// `id` is a string
var id = mash.find("[data-mashup-id"]).attr("data-mashup-id");

Getting the image (you can get information about the image from the resulting object):

// `img` is a jQuery wrapper around the `img` element
var img = mash.find("img");

Getting the div with the "TitleClass":

// `titleElement` is a jQuery wrapper around the `div` with the class
// "TitleClass"
var titleElement = mash.find("div.TitleClass");

edited Jun 26, 2013 at 7:51

answered Jun 26, 2013 at 6:32

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mekwall Over a year ago

Any specific reason why you use .attr instead of .data?

T.J. Crowder Over a year ago

@MarcusEkwall: Just that there's no reason to use data to retrieve an attribute value, and data is easily misunderstood. So unless the OP is using it, I don't introduce it. People tend to assume it's shorthand for interacting with data-* attributes, and of course, it isn't, and I've seen that confuse people. Here's an example of the kind of thing I've seen confuse people (with more commentary): jsbin.com/ubodih/1 (source). (Thanks for the edit, btw!)

mekwall Over a year ago

I agree that it's easily misunderstood and also misused in many cases, but in this case the OP probably want the ID as an int (as long as it's not a 64bit int) in which case .data would have done the type conversion automatically. I try to use .data where it makes sense, such as this case. I think it's better to teach people how to use .data properly instead of just going with .attr.

T.J. Crowder Over a year ago

@MarcusEkwall: I disagree that data's implicit type conversion is a good thing. :-) (And thanks, btw, I didn't know that.) I have no problem with teaching how to use data correctly, but when it's completely unrelated to the task at hand, it's just getting in the way of a clear explanation of the task at hand. When teaching, it's best to avoid introducing extraneous off-point topics.

Collectives™ on Stack Overflow

Find attribute and element from var with jquery?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related