jQuery to hide all classes that start with 'row' except ‘row2’ only when the parent class is viewContainerTop

Question

A variation of this question...

<div id="viewContainerTop">
  <div class="row1"></div>
  <div class="NotRow1"></div>
  <div class="row2"></div>
  <div class="row2"></div>
  <div class="row2"></div>
  <div class="row3 first"></div>
  <div class="donthideme"></div>
  <div class="row4"></div>
  <div class="row5"></div>
</div>

Answer 1

If I understand you correctly, try this:

$('#viewContainerTop > [class^=row]').not('.row2').hide();

The > is optional--it excludes matching of any deeper objects that start with row.

Here's a live example that shows this, too (hit refresh to see the selector dim the desired elements).

Answer 2

Avoiding your direct question, but a better approach might be to create another class, say "canhide" and attach it to the divs you want to target. You should not be doing matches on partial class names.

<div id="viewContainerTop">
  <div class="canhide row1"></div>
  <div class="NotRow1"></div>
  <div class="row2"></div>
  <div class="row2"></div>
  <div class="row2"></div>
  <div class="canhide row3 first"></div>
  <div class="donthideme"></div>
  <div class="canhide row4"></div>
  <div class="canhide row5"></div>
</div>