jQuery

Question

这是我必须与之合作的HTML。 spacer 类基本上是缩进文本。

<table>
 <tr>
  <td>
   <span class="spacer"></span>
   <span class="spacer"></span>
   HEADING 1
  </td>
 </tr>
 <tr>
  <td>
   <span class="spacer"></span>
   <span class="spacer"></span>
   <span class="spacer"></span>
   SUBHEADING 1
  </td>
 </tr>
 <tr>
  <td>
   <span class="spacer"></span>
   <span class="spacer"></span>
   <span class="spacer"></span>
   SUBHEADING 2
  </td>
 </tr>
 <tr>
  <td>
   <span class="spacer"></span>
   <span class="spacer"></span>
   HEADING 2
  </td>
 </tr>
</table>

我应该如何形成我的 jQuery 选择器，以便我能够获取标题行？和副标题？

我试过 $(tr).has('td.spacer') 但这并没有真正帮助，因为他们都使用它并且有多个（2 个用于 "headings"，3 个用于 "subheadings"）

Answer 1

您可以过滤

var f = function(n) {
    return function() {
        return $(this).find('.spacer').length === n;
    }
}

var headings   = $('td').filter( f(2) );
var subheading = $('td').filter( f(3) ); 
// ..etc

var f = function(n) {return function() {return $(this).find('.spacer').length === n}};

$('td').filter( f(2) ).css('color','red');
$('td').filter( f(3) ).css('color','blue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tr>
  <td>
   <span class="spacer"></span>
   <span class="spacer"></span>
   HEADING 1
  </td>
 </tr>
 <tr>
  <td>
   <span class="spacer"></span>
   <span class="spacer"></span>
   <span class="spacer"></span>
   SUBHEADING 1
  </td>
 </tr>
 <tr>
  <td>
   <span class="spacer"></span>
   <span class="spacer"></span>
   <span class="spacer"></span>
   SUBHEADING 2
  </td>
 </tr>
 <tr>
  <td>
   <span class="spacer"></span>
   <span class="spacer"></span>
   HEADING 2
  </td>
 </tr>
</table>

Answer 2

根据 .spacer 个跨度元素的计数获取。使用 :has(), :not() and :nth-child() 伪 class 选择器的组合。

// get head - which don't have 3rd `spacer` element
$('tr:has(:not(td .spacer:nth-child(3)))').css('color', 'green');

// get subhead - which have 3rd `spacer` element
$('tr:has(td .spacer:nth-child(3))').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span class="spacer"></span>
      <span class="spacer"></span>
      HEADING 1
    </td>
  </tr>
  <tr>
    <td>
      <span class="spacer"></span>
      <span class="spacer"></span>
      <span class="spacer"></span>
      SUBHEADING 1
    </td>
  </tr>
  <tr>
    <td>
      <span class="spacer"></span>
      <span class="spacer"></span>
      <span class="spacer"></span>
      SUBHEADING 2
    </td>
  </tr>
  <tr>
    <td>
      <span class="spacer"></span>
      <span class="spacer"></span>
      HEADING 2
    </td>
  </tr>
</table>

jQuery - select 一个包含 n 个重复 child 元素的元素

jQuery - select an element which contain n number of duplicate child elements

javascript

jquery-selectors