html元素的字符串没有添加到页面,如何获取元素对应的属性

比如有一个"<span id='a1' title='t1' uid='u1'>测试类容</span>"

(1)如果这种格式的字符串已经添加到页面,在页面利用document可以找到,那么可以利用jquery或者js先根据id获取节点,在获取对应属性

(2)如果该节点没有添加到页面,如何获取该字符串span的所有属性,比如获取id,title和uid,如何获取?

可以这么做:

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(str, 'text/html');//生出以html包裹的html节点对象
var $a = $(htmlDoc).find('span');
if($a.length > 0){
    var title = $a.attr("title");
    var id = $a.attr("id");
	var uid = $a.attr("uid");
	
} 

项目代码:

easyui的datagrid的field的formatter返回一个字符串,该字符串会生出对应的dom对象

需求:如果按钮小于等于2个,则正常显示;大于2个,增加一个"更多"菜单,保留一个一级菜单,其余菜单在"更多"里面作为子菜单显示:

function actionFormatterFun(value,row,index){
    var str = "";
    //按钮1
	var menuParam = new Array();
    menuParam.push("参数1",650,350,"modifyProcess?eprjInfoId=row.id",row.uuid);
    var menuStr = getFirstFun(row,"按钮1","按钮1","icon-search","showDialogForUser",menuParam);
    str += menuStr;
    //按钮2
    var menuParam = new Array();
    menuParam.push("参数2",650,350,"modifyProcess?eprjInfoId=row.id",row.uuid);
    var menuStr = getFirstFun(row,"按钮2","按钮2","icon-search","showDialogForUser",menuParam);
    str += menuStr;
    //按钮3
    var menuParam = new Array();
    menuParam.push("参数3",650,350,"modifyProcess?eprjInfoId=row.id",row.uuid);
    var menuStr = getFirstFun(row,"按钮3","按钮3","icon-search","showDialogForUser",menuParam);
    str += menuStr;

    var finalStr = returnFinalStrFun(str,row,parent);
	return finalStr;
}

/**
 * 返回最终的菜单字符串
 * @param str 菜单的字符串
 * @returns
 */
function returnFinalStrFun(str,row,parent){
	var menuNum = getTotalMenuNumFun(str);
	if(menuNum <=2){
		return str;
	}
    var menuId = row.id;
    var menuUid = row.uuid;
     if(parent){
    	menuId = parent.id;
    	menuUid = parent.uuid;
    }
    //保留第一个菜单,其他的菜单放入到"更多"里面
    var str = initMenuStrFun(str,row,menuId,menuUid);
    return str;
}

/**
 * 获取当前行所有一级菜单的数量;如果数量<=2,则都做一级显示,否则要显示二级
 * 以<a>对象的个数来作为子菜单的个数,个数为split之后-1
 * @param str 菜单的字符串
 * @returns
 */
function getTotalMenuNumFun(str){
	if(str){
		var split = str.split("</a>");
		return split.length-1;
	}
	return 0;
}

/**
 * 根据菜单数量初始化最后的菜单样式
 * @param str 菜单字符串
 * @returns
 */
function initMenuStrFun(str,row,menuId,menuUid){
	var finalMenuStr = "";
	if(str){
		var split = str.split("</a>");
		finalMenuStr += split[0]+"</a>";//以</a>切割了,这里要加上</a>,为需要保留的第一个菜单
        //加入"更多"菜单
		finalMenuStr += "<a uid='"+menuId+"' uuid='"+menuUid+"' href='javascript:void(0)' class='__zdymenu' >更多</a>";
		finalMenuStr += "<div id='__zdymenu"+row.id+"'>";
		for(var i = 1;i < split.length;i++){
			if(split[i]){
                //把<a>标签的字符串转化为<div>的二级菜单显示方式
				var secondStr = getSecondFun(split[i]+"</a>");
				finalMenuStr += secondStr;
			}
		}
		finalMenuStr += "</div>";
	}
	return finalMenuStr;
}

/**
 * 根据一级子节点生成二级子节点
 * 注意:二级子节必须为div,否则显示有问题
 * @param str
 * @returns
 */
function getSecondFun(str){
	var returnStr = "";
	var parser = new DOMParser();//解析器
	var htmlDoc = parser.parseFromString(str, 'text/html');//解析为html元素
	var $a = $(htmlDoc).find('a');//获取虚拟的dom对象
	if($a.length > 0){
		var title = $a.attr("title");
		var text = $a.find("span[myText]").attr("myText");
		var icon = $a.find("span[myIcon]").attr("myIcon");
		var onclickStr = $a.attr("onclick");
		returnStr = getSecondFunByParam(title,text,icon,onclickStr);
	} 
	return returnStr;
}

/**
 * 获取二级菜单
 * @param row
 * @param title
 * @param text
 * @param icon
 * @param funName
 * @param param
 * @param clickStr
 * @returns
 */
function getSecondFunByParam(title,text,icon,clickStr){
	var divStr = "<div onclick='"+clickStr+"' title='"+title+"' data-options=\"iconCls:'"+icon+"'\">"+text+"</div>";
	return divStr;
}

/**
 * 获取一级菜单(注意,formatter的一级菜单以<a>标签显示;但是"更多"里面的子菜单必须以"div"显示,否则子菜单显示不正常)
 * @param row 当前所在的行
 * @param title 显示的标题
 * @param text 显示的文字
 * @param icon 按钮的样式
 * @param funName 按钮回调的函数
 * @param param 回调函数funName需要的参数
 * @returns
 */
function getFirstFun(row,title,text,icon,funName,param,menuFlag){
	var clickStr = getCallFun(funName,param);
	if(!menuFlag){
		menuFlag = "";
	}
	var str = "<a "+clickStr+" menuFlag='"+menuFlag+"' href='javascript:;' class='easyui-linkbutton l-btn l-btn-small l-btn-plain  btn-small-nt' plain='true' ";
    str += " title='"+title+"' >";
    str += "<span class='l-btn-left l-btn-icon-left'>";
    str += "<span class='l-btn-text' myText='"+text+"' myIcon='"+icon+"'>"+text+"</span>";
    str += "<span class='"+icon+"'></span>";
    str += "</span>";
    str += "</a>";
    return str;
}

/**
 * 根据参数和函数名,获取对应的函数绑定的事件的字符串
 * @param funName
 * @param param
 * @returns
 */
function getCallFun(funName,param){
	var clickStr = "onclick='"+funName+"(";
	if(param && param.length > 0){
		for(var i = 0;i < param.length;i++){
			if(i != 0){
				clickStr += ",";
			}
			if(typeof(param[i]) == 'number'){
				//如果是数字类型的参数,则原样传入数字(如果dialog的width和height传入字符串类型会有显示有问题)
				clickStr += ""+param[i]+"";
			}else{
				clickStr += "\""+param[i]+"\"";
			}
		}
	}
	clickStr += ");'";
	return clickStr;
}

 

转载于:https://my.oschina.net/u/2331760/blog/3084265