how to get value of inner <span> ,which does not have id or class slectors except parent div value?

Question

I am working on customization of a wordpress theme ,there was a situation that,When ever user resizes the browser window text content on the page should change its color.I successfully done with this using javascript in some standalone html page .Coming to the wordpress theme,I posted the code of the block from which i want to get the text and changes its color dynamically on resize below this post.The thing is that inner span and

elements of the following with class name "wpb_wrapper"did not have either ,'id' or 'class' selector.Without selector my function is not identifying the inner html elements and i'm not getting the values.I even tried some of the following things:

1. Firefox Xpath finder. (JS not rendering it!!)
2. document.select("span.wp_wrapper").get(0).nextElementSibling().text();
3. document.getElementById("item1").nextElementSibling.innerHTML

Theme Original Code:

 |<div class="wpb_wrapper"> <span style="color: #000000;">Some Text</span><p></p> <p><span style="color: #000000;">Some Text</span></p> <p><span style="color: #000000;">Some Text</span> </p></div> 

Answer 1

Might be you want to change all span text color in wpb_wrapper class then you have to write following selector.

$('.wpb_wrapper span').css({'color': 'red'});

 $('.wpb_wrapper span').css({'color': 'red'}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="wpb_wrapper"> <span style="color: #000000;">Some Text</span><p></p> <p><span style="color: #000000;">Some Text</span></p> <p><span style="color: #000000;">Some Text</span> </p></div> 

Answer 2

Please consider using the following CSS:

using !important

in order to override the inline CSS property present in your HTML ( style="color: #000000;" ).

This approach use pure CSS and JS is not required.

.wpb_wrapper span   {color:green !important}

Working example:

http://jsfiddle.net/8hxatjah/

More info on CSS on !important here

Answer 3

Use this

In Jquery

$('.wpb_wrapper span').css({'color': 'red'});

In css

.wpb_wrapper span   {color:red !important}

Answer 4

You can access a child of an HTML element by using

$('.wpb_wrapper span') 

Or if you're working on a responsive layout, you can use the

@media screen and (max-width: 300px) {
   .wpb_wrapper span { color: #000000;}
}

Answer 5

Ahh!! And Finally this was done using Jquery

 $('.wpb_wrapper span').css({'color': 'red'}); 

Thanks Every One!! But how could this can done using JavaScript .. Any way Thanks !!

Answer 6

1. $('.wpb_wrapper').find('span').text() you can use to get the value of span for one span value.

2. As you Have multiple span elements inside the div. if you want to get the each span value use the below code

   $('.wpb_wrapper').find('span').each(function(){ $(this).text(); });

3. If you want only one span value out of multiple spans, Please add id for each span element.