jQuery add class based on html

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:

Th开发者_开发百科e 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.

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/

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);


    }

    })

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 '.'

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

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');
});

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
});