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的时候用了
    (这个地方有点不太好,有空改进一下)


  • 相关阅读:
    BZOJ 1391: [Ceoi2008]order
    BZOJ 4504: K个串
    2019 年百度之星·程序设计大赛
    POJ 2398 Toy Storage (二分 叉积)
    POJ 2318 TOYS (二分 叉积)
    HDU 6697 Closest Pair of Segments (计算几何 暴力)
    HDU 6695 Welcome Party (贪心)
    HDU 6693 Valentine's Day (概率)
    HDU 6590 Code (判断凸包相交)
    POJ 3805 Separate Points (判断凸包相交)
  • 原文地址:https://www.cnblogs.com/DonaldTrump/p/6274809.html
Copyright © 2011-2022 走看看