Question

希望使用jQuery将图像的类名移动到包含figure元素...

<figure class="wp-caption">
    <img class="imghvr-hinge-up" src="image.jpg">
    <figcaption >A sample caption</figcaption>
</figure>

特别是我想移动任何以＆＃39; imghvr开头的img标签类名称 - ＆＃39;它包含的数字，如果包含数字的人具有类名＆＃39; wp-caption＆＃39;。结果如下所示......

<figure class="wp-caption imghvr-hinge-up">
    <img class="" src="image.jpg">
    <figcaption >A sample caption</figcaption>
</figure>

希望有意义！）非常感谢任何帮助！

Answer 1

你可以这样做

＆＃13;

$('img[class^="imghvr-"]').each(function() {
  var cl = $(this).attr('class');
  $(this).removeClass().parent('[class="wp-caption"]').addClass(cl);
});

＆＃13;

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

＆＃13;

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

Answer 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 = '';
        }

    }

这样的事情。我没有测试过。

编辑：一如既往，比我聪明^^

Answer 4

您可以使用.closest()，.addClass(function(){})，.is()

＆＃13;

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

＆＃13;

img[class^="imghvr-"] {
  border: 1px solid blue;
}
figure[class*="imghvr-"] {
  border: 1px solid red;
}

＆＃13;

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

＆＃13;

或者，使用.toggleClass()，.is()，.find()，.attr()

＆＃13;

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

＆＃13;

img[class^="imghvr-"] {
  border: 1px solid blue;
}
figure[class*="imghvr-"] {
  border: 1px solid red;
}

＆＃13;

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

＆＃13;

将类名从子级移动到父级

4 个答案: