Question

这是我的HTML结构。

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

我想使用jQuery根据其兄弟div（div.data）中的媒体类（span.media）中的HTML将类附加到标记上

例如：
上面的HTML会根据“.mp4”将“视频”附加到标签上如果是http://www.example.com/image.jpg或http://www.example.com/image.png，则会将“图片”附加到班级。

Answer 1

怎么样：

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

使用带有函数的.addClass版本（我不完全清楚要添加类的标记，但这应该让你从正确的方向开始）。

还使用bitwise not operator ~将indexOf的-1结果转换为0（假名值）

示例： http://jsfiddle.net/andrewwhitaker/NaKW4/

如果您要将课程添加到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";
    }
});

示例： http://jsfiddle.net/andrewwhitaker/vKPy2/

Answer 2

使用jQuery选择值为'$（“。media”）的项目.text（）//这将为您提供span中的文本

1.从后到前寻找第一个'/'....

2.get substring从那里到结束

3.get new string的子字符串直到'。'

的第一个实例

使用jquery addclass（）函数将类添加到div.data`

Answer 3

我认为你可能想要......一般情况......不是特别的。该脚本获取文件的名称并设置类。

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


    }

    })

Answer 4

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

Answer 5

这是一个建议。使用一些数组来存储要测试的扩展以及要应用于该div的结果类。然后调用自定义函数来测试正在使用的扩展，并通过.addClass（）方法应用适当的类。这是一个JS小提琴，你可以看一下它的全部动作。

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

尝试将扩展程序更改为“png”或“jpg”以查看更改。我添加了一些简单的CSS只是为了更清楚地说明事情。祝你好运！ - 杰西

PS这里是JS代码供参考：

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

jQuery基于html添加类

5 个答案: