Question

首先，对不起，如果这是一个简单的问题。我是jQuery的新手，我想知道如何检查元素是否存在，如果存在，则更改css属性。

这就是我的意思：我有以下清单：

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

我想知道如何检查select-inline内是否存在班级element-rendered，如果确实如此，我怎样才能将element-choice的css背景更改为蓝色？

我创建了 fiddle 来重现此示例。

再次对不起，如果这是一个简单的问题，但我是jQuery的新手。

Answer 1

您可以使用> vstest.console MyTestProject\bin\Debug\MyTestProject.dll检查DOM中是否存在该元素。

.length将使用类$('.element-rendered .select-inline')选择元素中具有类select-inline的所有元素。选择器上的element-rendered将返回匹配元素的数量。因此，数字大于1，意味着元素存在。然后，您可以使用.length设置内联样式。

Demo

＆＃13;

.css

＆＃13;

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

＆＃13;

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

＆＃13;

我还建议您使用CSS中的类，并使用<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>将其添加到元素中。

Demo

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

如何检查元素选择内联是否存在于元素呈现内部，如果存在，如何将element-choice的css背景更改为蓝色？

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

<强>文档：

Answer 6

Demo

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

jQuery：如何检查元素是否存在并更改css属性

6 个答案: