【问题标题】: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>

希望这是有道理的!)任何帮助将不胜感激!

【问题讨论】:

  • 看起来很简单。显示到目前为止的代码,以便我们知道为什么您尝试的方法不起作用。

标签: javascript jquery wordpress image addclass


【解决方案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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-12-30
      • 2020-10-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多