對於你找到的每一個文本，設置一個類

Question

我有一個div和一個包含文本的div。在此基礎上的文字我想設置另一個類用。第滑塊文本

<div class="page-slider-text"> 
    <div class="farbschema-front">Light</div> 
</div> 

<div class="page-slider-text"> 
    <div class="farbschema-front">Dark</div> 
</div> 

JS：

$('.page-slider-text').filter(function() { 
    return $('.farbschema-front:contains("Light")'); 
}).addClass('light'); 

$('.page-slider-text').filter(function() { 
    return $('.farbschema-front:contains("Dark")'); 
}).addClass('dark'); 

它的工作原理，與。第滑蓋文本得到光的問題和黑暗的類，而不是根據適合內部匹配的div。

很可能是我的想法出現問題的可能性。

Answer 1

您可以簡化您的代碼，以在單個調用中處理這兩個元素，即addClass()，它根據子元素.farbschema-front的文本設置類。試試這個：

$('.page-slider-text').addClass(function() { 
 
    return $(this).find('.farbschema-front').text().toLowerCase(); 
 
});

.light { 
 
    color: #DDD; 
 
} 
 
.dark { 
 
    color: #666; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page-slider-text"> 
 
    <div class="farbschema-front">Light</div> 
 
</div> 
 

 
<div class="page-slider-text"> 
 
    <div class="farbschema-front">Dark</div> 
 
</div>

Answer 2

filter函數接受真或假的過濾項目。
jQuery總是返回一個真實的對象。
這意味着該代碼實際上什麼也不做：

.filter(function() { 
    return $('.farbschema-front:contains("Light")'); 
}) 

如果你想檢查是否子項具有Light或Dark，你可以做到以下幾點：

$('.page-slider-text').filter(function() { 
 
    return $(this).find('.farbschema-front:contains("Light")').length > 0; 
 
}).addClass('light'); 
 

 
$('.page-slider-text').filter(function() { 
 
    return $(this).find('.farbschema-front:contains("Dark")').length > 0; 
 
}).addClass('dark');

.light { 
 
    color: #DDD; 
 
} 
 
.dark { 
 
    color: #666; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page-slider-text"> 
 
    <div class="farbschema-front">Light</div> 
 
</div> 
 

 
<div class="page-slider-text"> 
 
    <div class="farbschema-front">Dark</div> 
 
</div>

這段代碼告訴「find all'page-slider-text'items。現在，只取那些至少有一個子元素'farbschema-front'包含'D方舟'。添加類「黑暗」這樣的元素「

然而，有一個較短的方式做到這一點：

$('.page-slider-text > .farbschema-front:contains("Dark")').parent().addClass("dark"); 
 
$('.page-slider-text > .farbschema-front:contains("Light")').parent().addClass("light");

.light { 
 
    color: #DDD; 
 
} 
 
.dark { 
 
    color: #666; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page-slider-text"> 
 
    <div class="farbschema-front">Light</div> 
 
</div> 
 

 
<div class="page-slider-text"> 
 
    <div class="farbschema-front">Dark</div> 
 
</div>

這意味着」找到讓所有‘farbschema-前’元素'Dark'作爲文本，它是'page-slider-text'元素的子元素。現在，把他們的父母（這是'頁面滑塊文本'）並添加一個類'黑暗'「。