jQuery add class based on html

Question

This is my HTML structure.

<a href="www.example.com" rel="group-1" class="project">
    <img src="http://www.example.com/image.png">
</a>
<div class="data">
    <span class="media">http://www.example.com/video.mp4</span>
    <div class="desc">
        <p>asdfs</p>
        <a href="http://www.example.com/link">view link</a>
    </div>
</div>

I want to use jQuery to attach a class onto the tag based upon the HTML from the media class (span.media) in its sibling div (div.data)

For example:
The above HTML would attach "video" to the tag based upon the ".mp4"
If it was http://www.example.com/image.jpg or http://www.example.com/image.png then it would attach "image" to the class.

OK, so you've told us what you want to do... now what's your question? What have you tried so far? — Andy E
– Andy E, Commented Jul 22, 2011 at 16:41
hmm...you're right. When people comes here to ask a question it would be normal to have tried something before — Emil Condrea
– Emil Condrea, Commented Jul 22, 2011 at 17:02
You guys are right. I should at least try to solve my problem. I did try to target the <a> tag with css attributes but since there was no content selector I came to a dead end. So I posted here to get your responses and help. — imHavoc
– imHavoc, Commented Jul 22, 2011 at 18:12

Andrew Whitaker · Accepted Answer · 2011-07-22 17:04:49Z

1

How about:

$(".media").addClass(function() {
    var text = $(this).text();
    if (~text.indexOf("mp4")) {
        return "video";
    } else if (~text.indexOf("jpg") || ~text.indexOf("png")) {
        return "image";
    }
});

using the version of .addClass that takes a function (I'm not entirely clear which tag you want to add the class to, but this should get you started in the right direction).

Also uses the bitwise not operator ~ to turn the -1 result of indexOf into 0 (a falsey value)

Example: http://jsfiddle.net/andrewwhitaker/NaKW4/

If you want to add the class to div.data:

$(".data").addClass(function() {
    var text = $(this).find(".media").text();
    if (~text.indexOf("mp4")) {
        return "video";
    } else if (~text.indexOf("jpg") || ~text.indexOf("png")) {
        return "image";
    }
});

Example: http://jsfiddle.net/andrewwhitaker/vKPy2/

edited Jul 22, 2011 at 17:04

answered Jul 22, 2011 at 16:43

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

1 Comment

imHavoc Over a year ago

Thank you. I like yours the best because it was the most concise and straightforward.

Emil Condrea · Accepted Answer · 2011-07-22 16:49:12Z

1

i think this you may want...a general case...not a particular. The script gets the name of the file and set the class.

$(document).ready(function(){
       $('.media').each(function(){
       var content = $(this).html();
       var nr =  content.lastIndexOf('/')
       content = content.substr(nr+1)
       nr = content.indexOf('.')
       content = content.substr(0,nr)
       $(this).parent().addClass(content);


    }

    })

answered Jul 22, 2011 at 16:49

Emil Condrea

9,9937 gold badges35 silver badges52 bronze badges

Comments

BenMorel · Accepted Answer · 2013-11-24 12:57:24Z

1

Use jQuery to select item with value '$(".media").text() //this will get you the text in span

1.parse from back to front looking for first '/'....

2.get substring from there till end

3.get substring of new string until first instance of '.'

use jquery addclass() function to add class to div.data`

edited Nov 24, 2013 at 12:57

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Jul 22, 2011 at 16:44

M4V3R1CK

7713 gold badges9 silver badges22 bronze badges

1 Comment

Yuda Prawira Over a year ago

so, do you mean we need regex?

BumbleB2na · Accepted Answer · 2011-07-22 16:46:31Z

0

function GetExtension(filename) {
    var filenameSplit = filename.split('.');
    var fileext = filenameSplit[filenameSplit.length - 1];
    return fileext;
}    

function InjectVideoOrImageClass() {
    var filename = $('.data .media').html();
    if(GetExtension(filename) == 'mp4') {
        $('.data').addClass('video');  
    } 
    else {
        $('.data').addClass('image');  
    }
}

$(document).ready(function() {
    InjectVideoOrImageClass();
    if($('.data').hasClass('video'))
        alert('yes');
});

answered Jul 22, 2011 at 16:46

BumbleB2na

10.8k6 gold badges30 silver badges31 bronze badges

Comments

Jesse · Accepted Answer · 2011-07-22 17:54:58Z

Here's a suggestion. Use some arrays to store the extensions you want to test for as well as the resulting classes you want to apply to that div. Then call a custom function to test what extension is in use and apply the appropriate class via the .addClass() method. Here's a JS Fiddle you can have a look at to see it all in action.

http://jsfiddle.net/HZnx5/10/

Try changing the extension to 'png' or 'jpg' to see the change. I added some simple CSS just to illustrate things a bit more clearly. Best of luck! - Jesse

PS Here's the JS code here for reference:

$(function(){
    var mediaExtensions = ['mp4', 'jpg', 'png']; //array of whatever types you want to check against
    var mediaTypes = ['video', 'image']; //array of corresponding classes you want to use
    var dataItem = $('.data'); //a JQ object correseponding to the '.data' element to add the class to

function doClassChange(el) {
  var elItem = $(el); //corresponds to the element you want to add the class to
  var mediaExtension = elItem.find('.media').text().split('.'); //getting the extension
  mediaExtension = mediaExtension[mediaExtension.length - 1];

  var mediaType; //the class we're going to add to the dataItem element
  switch (mediaExtension) {
    case mediaExtensions[0]:
    //mp4
    mediaType = mediaTypes[0]; //video type
    break;
    case mediaExtensions[1]:
    //jpg - same case as png
    case mediaExtensions[2]:
    //png - same as jpg
    mediaType = mediaTypes[1]; //image type
    break;
    default:
    mediaType = 'undefined'; //or whatever other value you'd like to have by default
}
  return mediaType;
}

dataItem.addClass(doClassChange(this)); //adding the class to the dataItem, and calling a function which does all of the logic
});

Collectives™ on Stack Overflow

jQuery add class based on html

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related