Understanding Code relationship to Class (Code Works)


#1


I am working through "Interactive Website: News Reader". I understand everything in this code except why you use the class ".description" instead of ".description row"

Java Script:
$(this).children('.description').show();

HTML: div class="description row"

Why would the Java Script not be:

$(this).children('.description row').show();

Could someone explain.


#2

I think that I have answered my own question.

The HTML element is actually tagged by two classes: description and row

The 'description' class is defined in Style.css and the 'row' class is defined in the jQuery implementation.

Would someone be so kind as to confirm my understanding.


#3

@tnorman33,
Your assumption
The 'description' class is defined in Style.css and the 'row' class is defined in the jQuery implementation.
should be

The 'description' class is defined in Style.css 
and 
the 'row' class is defined in the Bootstrap implementation.

#4

@tnorman33,
They have defined 7 articles
which are packed into a container

Here is the how the Document Object Model view looks like for
this HTML-page..
I have put the current class on the 4the Article (76)

                   html
                    |
      + - - - - - - + - - - - - -+
      |                          |
      3                          7
     head                       body
      |                          |
  + - + - +          + - - - - - + - - - - - - +
  |       |          |           |             |
  4       5          8          165           166
 link    link       div        script        script
                 .articles
                 .container
                     |
 + - - - + - - - + - + - + - - - + - - - + - - - +
 |       |       |       |       |       |       |
 10      32      54      76      98     120     142
 div     div     div     div     div    div     div  < .article
                      .current                     sibling's  
                          |                          .next()
           +- - - - - - - + - - - - - - - - +
           |                                |
           77                               88
          .item                        .description
           div                              div
            |                                |
  + - - - - + - - - -+           + - - - - - + - - - - -+
  |         |        |           |           |          |
  78        81       84          89          90         94
  div       div      div         div         div        div
                                              |
                                      + - - - + - - - +
                                      |               |
                                      h1              p

The numbers in the Diagram
represent the line-number in the index.HTML file.

++ bootstrap
http://getbootstrap.com/getting-started/
http://getbootstrap.com/2.3.2/components.html
We now have .col-xs (phones), .col-sm (tablets), .col-md (desktops), and .col-lg (large desktops).

      <div class="article current">
ROW        <div class="item row">
COL1          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
COL2          <div class="col-xs-6">
            <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
          </div>
COL3          <div class="col-xs-3">
            <p class="pubdate">Mar 23</p>
          </div>
        </div>
>invisible with "display=none;" <
ROW        <div class="description row">
COL1          <div class="col-xs-3">&nbsp;</div>
COL2          <div class="col-xs-6">
            <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
            <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
          </div>
COL3          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>