javascript - Show span if parent div hasClass() - Stack Overflow

admin管理员组

文章数量:1397142

I'm beating myself over the head with this one. I don't know what's doing on. It's pretty simple but it just doesn't work. I want to show a span item when a div has a class. Yup, basic, but I can't get it to work.

Here is my HTML with the class add-product

<div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product">
    <span class="arrow">Testing</span>
</div>

And this is the JavaScript

$(document).ready(function($){
    if ($("#ot-pr").hasClass('add-product')){
        $(".arrow").show();
    } else { 
        $(".arrow").hide();
    }
});

Here is the CSS of the .arrow

.arrow {
    display: none;
    width: 0; height: 0;
    line-height: 0;
    border-right: 16px solid transparent;
    border-top: 10px solid #c8c8c8;
    top: 60px;
    right: 0;
    position: absolute;
}

What have I tried, adding a find(span) and add else if:

$(document).ready(function(){
    if ($("#ot-pr").hasClass('add-product')){
        $(".arrow").find('span').show();
    } else if { 
        $(".arrow").hide();
    }
});

Both separate or together don't work. Why isn't this working. This should be basic right?! I get no console errors and jQuery.js as been added to the page. All other scripts work just fine.

I'm beating myself over the head with this one. I don't know what's doing on. It's pretty simple but it just doesn't work. I want to show a span item when a div has a class. Yup, basic, but I can't get it to work.

Here is my HTML with the class add-product

<div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product">
    <span class="arrow">Testing</span>
</div>

And this is the JavaScript

$(document).ready(function($){
    if ($("#ot-pr").hasClass('add-product')){
        $(".arrow").show();
    } else { 
        $(".arrow").hide();
    }
});

Here is the CSS of the .arrow

.arrow {
    display: none;
    width: 0; height: 0;
    line-height: 0;
    border-right: 16px solid transparent;
    border-top: 10px solid #c8c8c8;
    top: 60px;
    right: 0;
    position: absolute;
}

What have I tried, adding a find(span) and add else if:

$(document).ready(function(){
    if ($("#ot-pr").hasClass('add-product')){
        $(".arrow").find('span').show();
    } else if { 
        $(".arrow").hide();
    }
});

Both separate or together don't work. Why isn't this working. This should be basic right?! I get no console errors and jQuery.js as been added to the page. All other scripts work just fine.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 3, 2016 at 14:20 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Aug 3, 2016 at 12:34 SteggieSteggie 5251010 silver badges3131 bronze badges 3

• Why dont you think it works? (Your first attempt looks fine) – tymeJV Commented Aug 3, 2016 at 12:35
• Use CSS: #ot-pr.add-product .arrow { display: block; } – Tushar Commented Aug 3, 2016 at 12:35
• 1 Works fine for me: JSFiddle – Rajesh Commented Aug 3, 2016 at 12:37

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 10

There's no need for JS here, you can achieve this in CSS alone:

.arrow {
  display: none;    
  /* simplified CSS for the example */
}
div.add-product .arrow {
  display: block;
}

<div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product">
  <span class="arrow">arrow 1</span>
</div>

<div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product">
  <span class="arrow">arrow 2</span>
</div>

<!-- not visible -->
<div id="ot-pr" class="status-publish has-post-thumbnail hentry">
  <span class="arrow">arrow 3</span>
</div>

I think no need to write javascript for this, you can manage it by CSS code only

.arrow {
    display: none;
    width: 0; height: 0;
    line-height: 0;
    border-right: 16px solid transparent;
    border-top: 10px solid #c8c8c8;
    top: 60px;
    right: 0;
    position: absolute;
}

div.add-product > span.arrow
{
   display: block !important;
}

$(document).ready(function(){

  if($("#ot-pr").hasClass('add-product') == true){
    $(".arrow").css("display","block");
  }
  else { 
    $(".arrow").css("display","none");
    }
});

jQuery solution:

var $arrow = $('.arrow'),
    $otPr = $('#ot-pr');

$otPr.hasClass('add-product')
  ? $arrow.show()
  : $arrow.hide();

.arrow {
  display: block;
  /* ... */
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product">
  <span class="arrow">Some text</span>
</div>

replace css with

.arrow {
    display: block;
    width: 100px; height: 100px;
    line-height: 0;
    border-right: 16px solid transparent;
    border-top: 10px solid #c8c8c8;
    top: 60px;
    right: 0;
    position: absolute;
}

just add display:block and add height width

本文标签： javascriptShow span if parent div hasClass()Stack Overflow