Solved

jquery not selector with class selector

Posted on 2016-10-20
3
63 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 57

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

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

726 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