jQuery基于html添加类
这是我的 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
那么它会附加“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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
怎么样:
使用带有函数的
.addClass
版本(我我不完全清楚您想要将类添加到哪个标签,但这应该让您朝着正确的方向开始)。还使用 按位非运算符
~
来将indexOf
的 -1 结果变为 0(错误值)示例: http://jsfiddle.net/andrewwhitaker/NaKW4/
如果要将类添加到
div.data
:示例: http://jsfiddle.net/andrewwhitaker/vKPy2/
How about:
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 ofindexOf
into 0 (a falsey value)Example: http://jsfiddle.net/andrewwhitaker/NaKW4/
If you want to add the class to
div.data
: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.
使用 jQuery 选择值为 '$(".media").text() 的项目 //这将为您提供跨度中的文本
1.从后到前解析查找第一个 '/'....
2.获取子字符串从那里直到结束
3.获取新字符串的子字符串,直到第一个“.”实例
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 '.'
这是一个建议。使用一些数组来存储要测试的扩展以及要应用于该 div 的结果类。然后调用自定义函数来测试正在使用的扩展,并通过 .addClass() 方法应用适当的类。这是一个 JS Fiddle,您可以查看它以了解所有操作。
http://jsfiddle.net/HZnx5/10/
尝试将扩展名更改为“png”或“ jpg' 以查看更改。我添加了一些简单的 CSS 只是为了更清楚地说明问题。祝你好运! - Jesse
PS 这里有 JS 代码供参考:
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: