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。

- Black

Answer 1

建议在选择器中提及 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>

- prasanth

---

太好了，这个可以按照要求不使用ID来实现。谢谢！ - Black

Answer 2

只需更改根选择器。

更新

选择每个div并使用filter方法。

克隆你要筛选的div，选择所有子元素（嵌套的div），删除它们，然后“返回”到父克隆的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>

- silentw

---

@Black 更新了答案。 - silentw

干得好！好的解决方案。 - Black

不要仅使用 div 选择器，你可以将选择器缩小为原始的 div:contains('heinrich')。 - silentw

Answer 3

在你的示例中应该是不同的选择器：

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

- teo van kot

Answer 4

这应该可以做到。

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

- Amir Shahbabaie

Answer 5

既然您不想使用ID，我建议您尝试这个。

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

工作范例：https://jsfiddle.net/g50cfqzw/

- Gokulan P H

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

- Confused

Answer 7

试一下，它会起作用的。

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

- M. Hanafi