如何獲取inner的值， <span>除了parent div值之外，該</span>值<span>沒有id或class的選擇器？</span>

Question

我正在自定義wordpress主題，有一種情況是，當用戶調整瀏覽器窗口大小時，頁面上的文本內容應更改其顏色。我在一些獨立的html頁面中使用javascript成功完成了此操作。主題，我張貼了我要從中獲取文本並在其下方調整大小時動態更改其顏色的塊的代碼。問題是內部跨度和

以下具有類名稱“ wpb_wrapper”的元素沒有，'id'或'class'選擇器。沒有選擇器，我的功能無法識別內部html元素，並且我沒有得到值。我什至嘗試了一些以下內容：

1. Firefox Xpath Finder。 （JS無法渲染！！）
2. document.select("span.wp_wrapper").get(0).nextElementSibling().text();
3. document.getElementById("item1").nextElementSibling.innerHTML

主題原始代碼：

 |<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

可能是要更改wpb_wrapper類中的所有跨度文本顏色，然后必須編寫以下選擇器。

$('.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

請考慮使用以下CSS：

使用!important

為了覆蓋HTML中存在的內聯CSS屬性（ style="color: #000000;" ）。

這種方法使用純CSS，並且不需要JS。

.wpb_wrapper span   {color:green !important}

工作示例：

http://jsfiddle.net/8hxatjah/

關於CSS的更多信息!important 在這里

Answer 3

用這個

在jQuery中

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

在CSS

.wpb_wrapper span   {color:red !important}

Answer 4

您可以使用來訪問HTML元素的子元素

$('.wpb_wrapper span') 

或者，如果您使用的是自適應布局，則可以使用

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

Answer 5

啊！ 最后，這是使用Jquery完成的

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

感謝大家！！ 但是，如何使用JavaScript可以做到這一點呢。

Answer 6

1. $('.wpb_wrapper').find('span').text()可用於獲取一個跨度值的跨度值。

2. 當您在div中有多個span元素時。 如果要獲取每個跨度值，請使用以下代碼

   $（'。wpb_wrapper'）。find（'span'）。each（function（）{$（this）.text（）;}）;

3. 如果您只希望多個跨度中的一個跨度值，請為每個跨度元素添加ID。