Home » Code » jquery集合加减&获得对象所有html代码

jquery集合加减&获得对象所有html代码

对jquery集合进行相加,就是求合集,是add()方法。比如要给所有div加个边框,再给所有div和p设置背景颜色:

$("div").css("border", "1px solid green").add("p").css("background-color", "#e69")

而对于相减,则是not(),参数除了可以是选择器,jquery集合也是可以的,这个或许一些人没注意到。看下面这个需求,知道某个节点对象,求它某个父节点下除它及它的子节点之外的所有节点:

<div id="one">
	<div id="two">
		<ul id="ul">
			<li class="li">li</li>
			<li class="li">
				<span>li内的span</span>
			</li>

		</ul>
		<p id="p">段落</p>
		<ul id="ul2">
			<li>li</li>
		</ul>
	</div>
	<div id="two">div2</div>
</div>

看html结构,假如某个节点是#ul,要求它的父节点#one下所有的子节点,需要排除#ul以及它的所有子节点。

var $obj = $("#ul");
var $children = $obj.find("*");
var $objs = $obj.parents("#one").find("*");
$result = $objs.not($children).not($obj);
console.log($children);
console.log($objs);
console.log($result);

以上,#ul的子节点有3个,#one的所有子节点有9个,除去#ul及其子节点,就剩5个。

add&not
注意,not()中如果参数是jquery集合,只能是一个,逗号分割多个无效,只有第一个有效!

小tip:要获得一个jquery对象的所有html代码该如何操作呢?html()方法只有它内部的所有html代码,并不包括它本身的代码。经查询一般有以下三种方法:

  1. $(“#test).prop(“outerHTML”)
  2. $(#test)[0].outerTHML
  3. $(“<div>”).append($(“#test”)).html()

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.