将班级名称从子级移动到父级
Posted
技术标签:
【中文标题】将班级名称从子级移动到父级【英文标题】:Move class name from child to parent 【发布时间】:2016-08-09 05:02:34 【问题描述】:希望使用 jQuery 将图像的类名移动到包含图形元素的图像中...
<figure class="wp-caption">
<img class="imghvr-hinge-up" src="image.jpg">
<figcaption >A sample caption</figcaption>
</figure>
特别是我想将任何以“imghvr-”开头的 img 标签类名移动到它的包含图,如果包含图的类名是“wp-caption”。结果将如下所示...
<figure class="wp-caption imghvr-hinge-up">
<img class="" src="image.jpg">
<figcaption >A sample caption</figcaption>
</figure>
希望这是有道理的!)任何帮助将不胜感激!
【问题讨论】:
看起来很简单。显示到目前为止的代码,以便我们知道为什么您尝试的方法不起作用。 【参考方案1】:你可以这样做
$('img[class^="imghvr-"]').each(function()
var cl = $(this).attr('class');
$(this).removeClass().parent('[class="wp-caption"]').addClass(cl);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="wp-caption">
<img class="imghvr-hinge-up" src="image.jpg">
<figcaption>A sample caption</figcaption>
</figure>
【讨论】:
这不会测试父级是否真的有wp-caption
类。
@Michael Oakley 你是对的,谢谢。更新了我的答案。
谢谢内纳德。这似乎对我来说很完美!
在检查父级是否有className
.wp-caption
之前,是否在img
处删除了className
?
@guest271314 OP 说这对他有用,所以我不会改变它,但你可以添加这个jsfiddle.net/2cnn77ue/3【参考方案2】:
$( 'img[class^="imghvr-"]' ).each( function()
var imghvrClass = $(this).attr('class').match(/imghvr-.*/)[0]
var $parent = $(this).parent()
if ( $parent.hasClass( 'wp-caption' ) )
$(this).removeClass( imghvrClass )
$parent.addClass( imghvrClass )
)
<figure class="wp-caption">
<img class="imghvr-hinge-up" src="image.jpg">
<figcaption >A sample caption</figcaption>
</figure>
<figure class="wp-caption">
<img class="imghvr-hinge-up2" src="image.jpg">
<figcaption >A sample caption</figcaption>
</figure>
【讨论】:
【参考方案3】:var imgs = document.querySelectorAll(".wp-caption img");
for(var i=0; i<imgs.length; i++)
var img = imgs[i];
if(img.className.startWith("imghvr-"))
img.parentChild.classList.push(img.className);
img.className = '';
类似的东西。我没有测试。
编辑:一如既往有比我聪明的人^^
【讨论】:
这段代码错误太多。请在分享前进行测试。【参考方案4】:您可以使用.closest()
、.addClass(function())
、.is()
var c = "[class^=imghvr-]";
$("img" + c)
.closest("figure")
.addClass(function()
if ($(this).is(".wp-caption"))
var img = $(c, this);
var imgClass = img[0].className;
img[0].className = "";
return imgClass;
)
img[class^="imghvr-"]
border: 1px solid blue;
figure[class*="imghvr-"]
border: 1px solid red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<figure class="wp-caption">
<img class="imghvr-hinge-up" src="image.jpg">
<figcaption>A sample caption</figcaption>
</figure>
<figure class="wp-caption">
<img class="imghvr-hinge-up" src="image.jpg">
<figcaption>A sample caption</figcaption>
</figure>
<figure class="wp">
<img class="imghvr-hinge-up" src="image.jpg">
<figcaption>A sample caption</figcaption>
</figure>
或者,使用.toggleClass()
、.is()
、.find()
、.attr()
var c = "[class^=imghvr-]";
$("figure.wp-caption").toggleClass(function()
var img = $("img", this);
return img.is(c) ? img.attr("class") : false
).find(c).attr("class", "");
img[class^="imghvr-"]
border: 1px solid blue;
figure[class*="imghvr-"]
border: 1px solid red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<figure class="wp-caption">
<img class="imghvr-hinge-up" src="image.jpg">
<figcaption>A sample caption</figcaption>
</figure>
<figure class="wp-caption">
<img class="imghvr-hinge-up" src="image.jpg">
<figcaption>A sample caption</figcaption>
</figure>
<figure class="wp">
<img class="imghvr-hinge-up" src="image.jpg">
<figcaption>A sample caption</figcaption>
</figure>
【讨论】:
以上是关于将班级名称从子级移动到父级的主要内容,如果未能解决你的问题,请参考以下文章
如何在不调用事件的情况下将数据从子级发送到父级(vue 2)