5 Replies - 309 Views - Last Post: 13 July 2017 - 10:09 AM

#1 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

JQuery "is" method verifying link instead of li element

Posted 12 July 2017 - 08:49 AM

Good afternoon. I'm trying to write a tab widget. I was studying the author's javascript code, when I came across this line of code:

   if (id && !$link.is('.active'))



I could swear the JQuery selection that had to be evaluated was the link's parent, that is, the li. Because the li element is the one that holds the active class not the <a> element. What's happening? did the author evaluate the link because of the behavior of capturing propagation or bubble propagation? Below, I'm posting the HTML, CSS and JS of the example. Thank you for your help.

the HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript &amp; jQuery - Chapter 11: Content Panels -  Tabs</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/tabs.css" />
  </head>

  <body>

    <header><h1>Monsieur Pigeon</h1></header>

    <section class="page">

      <div class="tabs">

        <ul class="tab-list">
          <li class="active"><a class="tab-control" href="#tab-1"><h3>Description</h3></a></li>
          <li><a class="tab-control" href="#tab-2"><h3>Ingredients</h3></a></li>
          <li><a class="tab-control" href="#tab-3"><h3>Delivery</h3></a></li>
        </ul>

        <div class="tab-panel active" id="tab-1">
           <p>Take your tastebuds for a gentle stroll through an English garden filled with Monsieur Pigeon's beautifully fragrant Flower Series marshmallows. With three sweetly floral options: <strong>Elderberry</strong>, <strong>Rose Petal</strong>, and <strong>Chrysanthemum</strong> - all edible and all naturally flavored - they will have you dreaming of butterflies and birdsong in no time.</p>
        </div>

        <div class="tab-panel" id="tab-2">
            <p><strong>ELDERBERRY:</strong> sugar, glucose syrup, elderberry concentrate, gelatine, natural color, cornflour, confectioner's sugar <strong>ROSE PETAL:</strong> sugar, glucose syrup, rose water, gelatine, natural color, cornflour, sugared rose petals, confectioner's sugar <strong>CHRYSANTHEMUM:</strong> sugar, glucose syrup, natural chrysanthemum extract, gelatine, natural color, cornflour, confectioner's sugar</p>
        </div>

        <div class="tab-panel" id="tab-3">
            <p>Free postage and packaging on all orders! Due to the perishable nature of our product, we regret that we are unable to ship items internationally at this time. If you would like to find out when Monsieur Pigeon is coming to your country, please sign up for the mailing list.</p>
        </div>

      </div><!-- .tabs -->

    </section><!-- .page -->

    <script
			  src="https://code.jquery.com/jquery-3.2.1.min.js"
			  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
			  crossorigin="anonymous">
    </script>
    <script src="js/tabs.js"></script>

  </body>
</html>




The CSS Files

base.css

@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);

body {
  background-color: #979797;
  color: #fff;
  margin: 0;
  padding: 0;}

.page {
  max-width: 640px;
  margin: 0 auto 30px auto;}

.panel {
  background-color: #fff;
  color: #666;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
  overflow: auto;}

button {
  border: none;}

/********** LOGO **********/
h1 {
  text-align: center;
  width: 200px;
  height: 100px;
  margin: 40px auto 40px auto;
  background-image: url('../img/logo.png');
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;}

/********** TYPOGRAPHY **********/
body, button {
    font-family: 'Jacques Francois', serif;}

h2, h3 {
  font-weight: normal;
  margin: 0;}
h2 {
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 230%;
  line-height: 1em;
  padding: 20px 0 0 20px;}
h3 {
  font-size: 90%;
  letter-spacing: 0.2em;}

p {
  font-family: 'Quattrocento Sans', sans-serif;
  line-height: 1.4em;}

a {
    text-decoration: none;}

button {
  font-size: 90%;
  text-align: left;
  text-transform: uppercase;}

  /*****************  No JS ***************/
#billboard {text-align: center;}
.js-warning {display: none;}

.no-js .js-warning {
  display: block;
  border: 3px solid #fff;
  text-align: center;
  background-color: #fff;
  color: #db5391;
  padding: 10px;}




tabs.css

/********** TABS **********/
.tab-list {
  margin: 0;
  padding: 0;}

.tab-list li {
  display: inline-block;
  list-style-type: none;
  background-color: #303030;
  border-bottom: 3px solid #858585;
  font-family: 'Jacques Francois', serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;}

.tab-list li a {
  color: #f2f2f2;
  display: block;
  padding: 3px 10px 3px 10px;}


/********** HOVER STATES **********/
.tab-list li.active, .tab-list li.hover {
  background-color: #e5e5e5;
  border-bottom: 3px solid #e5e5e5;}

.tab-list li.active a, .tab-list li a:hover {
  color: #666;
  background-color: #e5e5e5;}


/********** PANELS **********/
.tab-panel {
  display: none;
  background-color: #e5e5e5;
  color: #666;
  min-height: 150px;
  overflow: auto;}

.tab-panel.active {
  display: block;}

.tab-panel p {
  margin: 20px;}




Javascript

$('.tab-list').each(function(){                   // Find lists of tabs
  var $this = $(this);                            // Store this list
  var $tab = $this.find('li.active');             // Get the active list item
  var $link = $tab.find('a');                     // Get link from active tab
  var $panel = $($link.attr('href'));             // Get active panel

  $this.on('click', '.tab-control', function(e) { // When click on a tab
    e.preventDefault();                           // Prevent link behavior
    var $link = $(this),                          // Store the current link
        id = this.hash;                           // Get href of clicked tab 
    
    if (id && !$link.is('.active')) {             // If not currently active
    // why is $link being evaluated instead of his parent?
      $panel.removeClass('active');               // Make panel inactive
      $tab.removeClass('active');                 // Make tab inactive

      $panel = $(id).addClass('active');          // Make new panel active
      $tab = $link.parent().addClass('active');   // Make new tab active 
    }
  });
});




Is This A Good Question/Topic? 0
  • +

Replies To: JQuery "is" method verifying link instead of li element

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1789
  • View blog
  • Posts: 5,700
  • Joined: 15-January 14

Re: JQuery "is" method verifying link instead of li element

Posted 12 July 2017 - 11:18 AM

I haven't tested this, but if that works then my guess would be that it is checking all of the applied styles or classes, so since those propagate down the chain it would find that on any descendant element.
Was This Post Helpful? 0
  • +
  • -

#3 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Re: JQuery "is" method verifying link instead of li element

Posted 12 July 2017 - 11:45 AM

The code works perfectly. What I'm asking is:

shouldn't the instruction

if (id && !$link.is('.active'))




be written like this or something similar to this:

if (id && !$link.parent().is('.active'))




since the .active class is inside the <li> instead of the <a> element?

oddly, the first instruction works. And I don't understand why.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1789
  • View blog
  • Posts: 5,700
  • Joined: 15-January 14

Re: JQuery "is" method verifying link instead of li element

Posted 12 July 2017 - 01:58 PM

I was suggesting that the reason that it might work is because of the C in CSS. CSS rules cascade from parents to children, so if that is method is checking the entire set of classes or styles that are applied to an element, no matter how they're applied, then that's probably why it would work.
Was This Post Helpful? 1
  • +
  • -

#5 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Re: JQuery "is" method verifying link instead of li element

Posted 13 July 2017 - 07:20 AM

Quote

CSS rules cascade from parents to children


Do classes cascade from parents to children too?
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1789
  • View blog
  • Posts: 5,700
  • Joined: 15-January 14

Re: JQuery "is" method verifying link instead of li element

Posted 13 July 2017 - 10:09 AM

Technically I don't think they do, I think only the styles do. But I haven't looked at the source code of that is method to figure out how it works.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1