Solved

jquery not selector with class selector

Posted on 2016-10-20
3
30 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
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 51

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

707 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now