jQuery 筛选

jQuery 筛选

• 过滤

  • eq：根据索引匹配元素 + -1

  HTML：

  <ul>
   	<li>1</li>
   	<li>2</li>
   	<li class="lilist">3</li>
   	<li>4</li>
   	<p>41</p>
   	<li>5</li>
   </ul>
  

  jQuery：

   console.log($("ul>li").eq(0));
   console.log($("ul>li").eq(-2));
  

  • first、last：获取第一个及最后一个元素

  HTML：

  <ul>
   	<li>1</li>
   	<li>2</li>
   	<li class="lilist">3</li>
   	<li>4</li>
   	<p>41</p>
   	<li>5</li>
   </ul>
  

  jQuery：

   console.log($("ul>li").first());
   console.log($("ul>li").last());
  

  • hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true

  HTML：

  <ul>
   	<li>1</li>
   	<li>2</li>
   	<li class="lilist">3</li>
   	<li>4</li>
   	<p>41</p>
   	<li>5</li>
   </ul>
  

  jQuery：

   $("ul>li").eq(2).hasClass("lilist");
  

  • filter(expr|obj|ele|fn)：筛选出与指定表达式匹配的元素集合

  HTML：

  <ul>
   	<li>1</li>
   	<li>2</li>
   	<li class="lilist">3</li>
   	<li>4</li>
   	<p>41</p>
   	<li>5</li>
   </ul>
  

  jQuery：

   $("ul>li").filter("li.lilist");
  

  • is(expr|obj|ele|fn)：根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

  HTML：

  <ul>
   	<li>1</li>
   	<li>2</li>
   	<li class="lilist">3</li>
   	<li>4</li>
   	<p>41</p>
   	<li>5</li>
   </ul>
  

  jQuery：

   $("ul>li").eq(2).is(".lilist");
  

  • map(callback)：将一组元素转换成其他数组（不论是否是元素数组）

  HTML：

  <ul>
   	<li>1</li>
   	<li>2</li>
   	<li class="lilist">3</li>
   	<li>4</li>
   	<p>41</p>
   	<li>5</li>
   </ul>
  

  jQuery：

   var num = $("ul>li").map(function () {
       return $(this)[0];
   }
  

  • has(expr|ele)：保留包含特定后代的元素，去掉那些不含有指定后代的元素

  HTML：

  <ul>
   	<li>1</li>
   	<li>2</li>
   	<li class="lilist">3</li>
   	<li>4</li>
   	<p>41</p>
   	<li>5</li>
   </ul>
  

  jQuery：

   $("ul").has(".lilist");
  

  • not(expr|ele|fn)：删除与指定表达式匹配的元素

  HTML：

  <ul>
   	<li>1</li>
   	<li>2</li>
   	<li class="lilist">3</li>
   	<li>4</li>
   	<p>41</p>
   	<li>5</li>
   </ul>
  

  jQuery：

   $("ul>li").not(".lilist");
  

  • slice(start, [end])：选取一个匹配的子集

  HTML：

  <ul>
   	<li>1</li>
   	<li>2</li>
   	<li class="lilist">3</li>
   	<li>4</li>
   	<p>41</p>
   	<li>5</li>
   </ul>
  

  jQuery：

   $("ul>li").slice(0, 2);