jQuery基于html添加类

发布于 2024-11-26 05:35:48 字数 684 浏览 0 评论 0原文

这是我的 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.jpghttp://www.example.com/image.png 那么它会附加“image ”到班级。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

a√萤火虫的光℡ 2024-12-03 05:35:48

怎么样:

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

使用带有函数的 .addClass 版本(我我不完全清楚您想要将类添加到哪个标签,但这应该让您朝着正确的方向开始)。

还使用 按位非运算符 ~ 来将 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/

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/

懒猫 2024-12-03 05:35:48

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

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


    }

    })

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


    }

    })
扬花落满肩 2024-12-03 05:35:48

使用 jQuery 选择值为 '$(".media").text() 的项目 //这将为您提供跨度中的文本

1.从后到前解析查找第一个 '/'....

2.获取子字符串从那里直到结束

3.获取新字符串的子字符串,直到第一个“.”实例

  1. 使用 jquery addclass() 函数将类添加到 div.data`

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`
难忘№最初的完美 2024-12-03 05:35:48
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');
});
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');
});
桃扇骨 2024-12-03 05:35:48

这是一个建议。使用一些数组来存储要测试的扩展以及要应用于该 div 的结果类。然后调用自定义函数来测试正在使用的扩展,并通过 .addClass() 方法应用适当的类。这是一个 JS Fiddle,您可以查看它以了解所有操作。

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

尝试将扩展名更改为“png”或“ jpg' 以查看更改。我添加了一些简单的 CSS 只是为了更清楚地说明问题。祝你好运! - Jesse

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

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
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文