jQuery的index()原生js实现以及删除空白文本节点函数

funtion findIndex ( elem, array, i ){//实现jQuery.inArray()方法
  var len;
      if ( array ) {
          if ( indexOf ) {
              return indexOf.call( array, elem, i );
          }
          len = array.length;
          i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
          for ( ; i < len; i++ ) {
              if ( i in array && array[ i ] === elem ) {
                  return i;
              }
          }
      }

      return -1;
}

function index( elem ) {
  if ( !elem ) {
  //首先,获取满足选择器的第一个元素,然后获取第一个元素前面的所有的同级元素的个数
    if ( this[0] && this[0].parentNode ) {
      var parentnode = this[0].parentNode,
          node = this[0].previousSibling,
          count = 0;
      if(node != NULL){
        for(var i = 0; node != NULL; ++i ){
          node = node.previousSibling;
          ++count;
        }
      }
      return count;
    }else{
      return -1;
    }
    return ( this[0] && this[0].parentNode ) ? this.first().prevAll().length : -1;
  }
  if ( typeof elem === "string" ) {
    //如果指定参数为string
    return findIndex( this[0], jQuery( elem ) ,0);
  }
// dom对象或者jQuery对象
  return findIndex( elem.jquery ? elem[0] : elem, this ,0);
// If it receives a jQuery object, the first element is used
//如果是jQuery对象作为参数,那么获取参数第一个对象在调用选择器中的位置!
}

如果需要去掉节点中的空白节点,则加一个删除空白节点的函数即可

function cleanWhitespace(oEelement)//定义一个删除空白节点的函数
{
 for(var i=0;i<oEelement.childNodes.length;i++){
  var node=oEelement.childNodes[i];
  if(node.nodeType==3 && /^\s+/.test(node.nodeValue)){ 

      node.parentNode.removeChild(node)//删除节点
}
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
下拉树是一种常见的树形选择控件,可以在下拉框展示树形结构,用户可以通过下拉框选择树形节点。在实现下拉树时,可以使用ejs模板引擎、jQuery库、JavaScript原生HTML Select元素。 首先,在HTML文件创建一个下拉框,并给该下拉框设置id,如下所示: ```html <select id="tree-select"></select> ``` 接下来,使用ejs模板引擎创建下拉树节点的模板,如下所示: ```ejs <% function renderTree(data) { %> <% for (var i = 0; i < data.length; i++) { %> <option value="<%= data[i].id %>"><%= data[i].name %></option> <% if (data[i].children && data[i].children.length > 0) { %> <% renderTree(data[i].children); %> <% } %> <% } %> <% } %> ``` 该模板使用递归方式,遍历树形结构的每个节点,并将节点渲染成下拉框的一个选项。 接下来,使用jQuery库来获取下拉框,并在下拉框渲染树形结构。具体实现如下所示: ```javascript $(function() { // 模拟树形结构数据 var treeData = [ { id: 1, name: '节点1', children: [ { id: 2, name: '节点1-1', children: [ { id: 3, name: '节点1-1-1' }, { id: 4, name: '节点1-1-2' } ] }, { id: 5, name: '节点1-2' } ] }, { id: 6, name: '节点2' } ]; // 获取下拉框元素 var $select = $('#tree-select'); // 渲染树形结构到下拉框 renderTree(treeData, $select); // 定义渲染树形结构的函数 function renderTree(data, $select) { var html = ''; for (var i = 0; i < data.length; i++) { html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; if (data[i].children && data[i].children.length > 0) { renderTree(data[i].children, $select); } } $select.append(html); } }); ``` 上述代码首先定义了一个模拟的树形结构数据,然后获取下拉框元素,并调用渲染树形结构的函数将树形结构渲染到下拉框。渲染函数使用了递归方式来遍历树形结构的每个节点,并将节点渲染成下拉框的一个选项。 最后,将上述代码保存为HTML文件并在浏览器打开该文件,即可看到渲染出来的下拉树。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fullstack_lth

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值