我尝试选择具有特定html的div。看看我的例子:
$("#clickMe").click(function(){
$("div:contains('heinrich')").css("background-color", "limegreen")
});

.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
&#13;
jsFiddle: https://jsfiddle.net/fj1brnv8/2/
然而,父div的颜色也会发生变化。 有没有办法只选择元素本身,我不允许使用ID。
答案 0 :(得分:4)
更好地提及选择器className
$("div .normal:contains('heinrich')")
$("#clickMe").click(function(){
$("div .normal:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
答案 1 :(得分:2)
只需更改根选择器。
<强>更新强>
选择每个div
并使用filter method。
克隆你正在过滤的div
,选择所有子项(嵌套div),然后删除它们,然后再回复&#34;到父cloned div
并检索文本。
获取文本后,将内容与您正在搜索的文本进行比较。
$("#clickMe").click(function(){
$("div").filter(function(idx, val) {
return /heinrich/gi.test($(this).clone().children().remove().end().text());
}).css("background-color", "limegreen")
});
&#13;
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
&#13;
答案 2 :(得分:2)
在你的exable中应该是不同的选择器:
$("#masterdiv > div:contains('heinrich')")
答案 3 :(得分:1)
这应该
$("#clickMe").click(function(){
$("#masterdiv div:contains('heinrich')").css("background-color", "limegreen")
});
答案 4 :(得分:0)
由于您不想使用ID,我建议您尝试使用。
$('div > div:contains(heinrich)').css("background-color", "limegreen")
答案 5 :(得分:0)
试试这个
$("#clickMe").click(function(){
var html_trg="heinrich";
$('.normal').each(function(i,u){
var divtxt=$(u).html();
divtxt=$.trim(divtxt);
if(divtxt==html_trg){
$(u).css("background-color", "limegreen");
}
});
});
答案 6 :(得分:0)
试试这个会起作用
$("#clickMe").click(function(){
$("div#masterdiv").find('div.normal:contains(heinrich)').css("background-color", "limegreen")
});