Solved

jquery not selector with class selector

Posted on 2016-10-20
3
56 Views
Last Modified: 2016-10-21
Hi experts,

I'm using jquery and html

I have this fiddle
https://jsfiddle.net/6yhrwb6o/

If you run it and look at the rendered html with google chrome inspection tool it looks like this:

rendered html
In this fiddle i'm hiding every span that does not contain this string "_DivIconContainer_Row1" in the iD.
I'm using this statement which works.

$("span:not([id*='_DivIconContainer_Row1'])").hide();

But notice how some spans have the class PeachClass and some have the class KiwiClass.

Right now my fiddle is hiding every span that does does not contain this string "_DivIconContainer_Row1" regardless of what class it has on it.


Can i add another criteria to my current fiddle.

So what I want is look for spans that are using the class PeachClass  and then from those spans,  hide every span that does does not contain this string "_DivIconContainer_Row1"

So then the only spans that should be hidden are the ones I highlighted in yellow in this picture:

desired hidden spans are highlighted in yellow
Anyone know how I revise my fiddle?
0
Comment
Question by:maqskywalker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 41853021
Should be as simple as:

$("span.PeachClass:not([id*='_DivIconContainer_Row1'])").hide();
0
 
LVL 1

Author Closing Comment

by:maqskywalker
ID: 41853028
Thanks. Very nice!
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41853337
Just out of interest (Robert's answer probably still better)
#Div1 span {
 display: none;
}

Open in new window

$('#Div1 span:nth-of-type(5n-4)').show();

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
need help with share buttons 11 69
Worldmap 1 28
Do I need to force my browser to see my new Favicon 4 13
Display Flex does not Wrap Items 2 6
This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question