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.

Answer 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/