jQuery - 選擇具有特定html的元素

Question

我嘗試選擇一個具有特定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> 

jsFiddle： https ：//jsfiddle.net/fj1brnv8/2/

但是，父div的顏色也會發生變化。 有沒有辦法只選擇元素本身，我不允許使用ID。

Answer 1

更好地提及選擇器$("div .normal:contains('heinrich')")的className

 $("#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> 

Answer 2

只需更改根選擇器即可。

UPDATE

選擇每個div並使用過濾方法 。

克隆您正在過濾的div ，選擇所有子項（嵌套div），刪除它們然后“返回”到父cloned div並檢索文本。

有了文本，將內容與您正在搜索的文本進行比較。

 $("#clickMe").click(function(){ $("div").filter(function(idx, val) { return /heinrich/gi.test($(this).clone().children().remove().end().text()); }).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> 

Answer 3

在你的exable應該是不同的選擇器：

$("#masterdiv > div:contains('heinrich')")

Answer 4

這應該做

    $("#clickMe").click(function(){ 
$("#masterdiv  div:contains('heinrich')").css("background-color", "limegreen")
 });

Answer 5

既然你不想使用id我可以建議你試試這個。

   $('div > div:contains(heinrich)').css("background-color", "limegreen")

工作小提琴： https ： //jsfiddle.net/g50cfqzw/

Answer 6

嘗試這個

$("#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");
        }
    });
});

Answer 7

試試這個會起作用

  $("#clickMe").click(function(){
        $("div#masterdiv").find('div.normal:contains(heinrich)').css("background-color", "limegreen")
    });