各要素の中からparentsで絞る

セレクタの上にさかのぼった階層の要素（＝先祖要素）が選ばれました。[4]は先祖要素で更にdivを指定しているのでulは選ばれませんでした。

（注）実際は他の要素も選ばれるのですが、このページが真っ赤になってしまうので[1]～[4]各々のboxA内だけで選ばれるように範囲指定しています。

おおまかなコードとparentsのまとめ

上をかなり大雑把に書くと以下のようになります。

<input type="button" value="実行する">
<div class="boxA">
<div class="boxB">
		・・・
</div>
</div>

.boxB	{
  border-width: 5px;
  border-style: solid;
  border-color: #9cf; /* 水色 */
}

.selected {
  border-color: red;
}

	$('input').click(function(){
		$('li').parents('div').toggleClass('selected');
});

（見やすくするためにCSSは上記以外に多少の装飾をしています。また、HTML/CSS/jQueryで実際はこのページ用に複雑な処理をしています。）

CSSでborderを赤くするクラスを用意し、jQueryは
1行目：ボタンをクリックすると、
2行目：liの. 先祖要素でdivを探し. 探し出された要素のクラスを切り替える。
という処理です。

divをulなどに替えればそれらが選ばれます。

parentsメソッドで先祖要素（上の全ての階層）を絞る（探す）ことができました。

また、似たメソッドにparent（"s"の有無）メソッドがありますが、こちらは別の働きをします。詳しくは下記の関連記事を参照願います。