zoukankan      html  css  js  c++  java
  • jq中html函数的新用法

        <div class="container">test
            <div class="row">
              <div class="col-xs-2">col-md-2</div>
              <div class="col-xs-2">col-md-2</div>
              <div class="col-xs-2">col-md-2</div>
            </div>
        </div>

    jq的html()和text()这两个方法大家都不陌生吧

    不知道大家有没有遇到过这种情况,在上面的代码中,我想把<div class="container">后面的test这几个文字去掉,但是其余内容不变,要怎么改呢?

    这个问题其实一直困扰着我,一般来说,我会给test外面套个span标签,然后再通过删除span标签里面的内容达到删除的目的,而不影响其余内容

    但是能不能不加标签呢? $('.container').html($('.container').html().replace('test','')),这样也能实现

    但是。。

        <div class="container">test
            <div class="row">
              <div class="col-xs-2">col-md-2</div>
              <div class="col-xs-2">col-md-2</div>
              <div class="col-xs-2">col-md-2</div>
            </div>
        </div>
        <div class="container">html
            <div class="row">
              <div class="col-xs-2">col-md-2</div>
              <div class="col-xs-2">col-md-2</div>
              <div class="col-xs-2">col-md-2</div>
            </div>
        </div>
        <div class="container">text
            <div class="row">
              <div class="col-xs-2">col-md-2</div>
              <div class="col-xs-2">col-md-2</div>
              <div class="col-xs-2">col-md-2</div>
            </div>
        </div>

    如果是这种代码,就有些无能为力了

    $.fn.text()和$.fn.html()都可以传递function作为参数写法为$div.html(function(index, value))

    第一个参数是索引,第二个参数是html或text的原值

    this是指向元素集合中的当前元素

    贴一下代码吧

    $('.container').html(function(i,old){
        return old.replace($(this).text().split('
    ')[0],'');
    });
    $(this).text()这个返回值是一个字符串,由于我们的标签之间会有换行,所以我split的时候用了
    (这个地方有点不太好,有空改进一下)


  • 相关阅读:
    @Transactional 什么情况下会失效?
    如何主持一场专业的面试?
    MIT-HIB 心率数据库及相关
    hadoop中Writable类
    XXX.jar has no source attachment
    Win10Eclipse配置个人本地hadoop
    js去除两个数组中重复的元素
    JS找出两个数组中不相同的元素
    flex中order控制元素的排列顺序
    flex中align-self设置侧轴的某元素的对其方式
  • 原文地址:https://www.cnblogs.com/DonaldTrump/p/6274809.html
Copyright © 2011-2022 走看看