jQuery：如何檢查元素是否存在並更改CSS屬性

Question

首先，很抱歉，如果這是一個簡單的問題。 我是jQuery的新手，我想知道如何檢查元素是否存在，如果存在，請更改css屬性。

這是我的意思：我有以下列表：

<ul class="element-rendered">
    <li class="element-choice">Item A</li>
    <li class="select-inline">Item B</li>
</ul>

我想知道如何檢查element-rendered select-inline類中是否存在select-inline類，如果存在，如何將element-choice的css背景更改為blue？

我創建了一個小提琴來重現此示例。

再次抱歉，如果這是一個簡單的問題，但我是jQuery新手。

Answer 1

您可以使用.length來檢查元素是否存在於DOM中。

$('.element-rendered .select-inline')將在元素class element-rendered類中select-inline所有具有select-inline類的element-rendered 。 選擇器上的.length將返回匹配元素的數量。 因此，數字大於1表示元素存在。 然后，您可以使用.css設置內聯樣式。

演示

 if ($('.element-rendered .select-inline').length) { $('.element-choice').css('background', 'blue'); } 

 .element-choice { width: 100%; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <ul class="element-rendered"> <li class="element-choice">Item A</li> <li class="select-inline">Item B</li> </ul> 

---

我還將建議您在CSS中使用class，並通過使用addClass將其添加到元素中。

演示

Answer 2

var eR = $(".element-rendered");
if (eR.find(".select-inline").length > 0){
  eR.find(".element-choice").css("color", "blue");
}

Answer 3

這將適用於您的特定示例。

找到選擇線元素，它是元素渲染的子元素。 使用class element-choice查找所有同級元素，然后應用css。

$('.element-rendered>.select-inline').siblings('.element-choice').css('background','blue')

http://jsfiddle.net/SeanWessell/hjpng78s/3/

Answer 4

要檢查元素是否存在，可以使用.is()或@Tushar .length建議

var container = $(".element-rendered");
// alternatively `!!$(".select-inline", container).length`
$(".select-inline", container).is("*") 
&& $(".element-choice", container).css("background", "blue");

jsfiddle http://jsfiddle.net/hjpng78s/6/

Answer 5

如何檢查class-inline是否存在於元素渲染中，如果存在，如何將element-choice的CSS背景更改為藍色？

if ( $(".element-rendered > .select-inline").length ) {
    $(".element-rendered > .element-choice").css({
        'background-color': 'blue'
    });
}

文檔：

• 在jQuery對象中找到元素數。
• 為匹配的元素設置一個或多個CSS屬性

Answer 6

演示

if($(".element-rendered .select-inline")[0])
    $(".element-rendered .select-inline").css("background-color","red");