Staram się wybrać div, który ma określony HTML. Spójrz na mój przykład:

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

Jednak kolor Div Div jest również zmienia się również. Czy istnieje sposób, aby wybrać samego elementu, nie wolno mi używać identyfikatora.

3
Black 28 czerwiec 2017, 14:53

7 odpowiedzi

Najlepsza odpowiedź

Lepiej wymieniaj className w selektorze $("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>
4
prasanth 28 czerwiec 2017, 11:57

Spróbuj tego, to zadziała

  $("#clickMe").click(function(){
        $("div#masterdiv").find('div.normal:contains(heinrich)').css("background-color", "limegreen")
    });
0
M. Hanafi 28 czerwiec 2017, 12:11

Spróbuj tego

$("#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");
        }
    });
});
0
Confused 28 czerwiec 2017, 12:07

Ponieważ nie chcesz używać identyfikatorów, mogę sugerować, aby spróbować.

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

Porozmawiający skrzypce: https://jsfiddle.net/g50cfqzw/

0
Gokulan P H 28 czerwiec 2017, 12:07

To powinno to zrobić

    $("#clickMe").click(function(){ 
$("#masterdiv  div:contains('heinrich')").css("background-color", "limegreen")
 });
1
Amir Shahbabaie 28 czerwiec 2017, 11:57

Po prostu zmień selektor roota.

AKTUALIZACJA

Wybierz każdy div i użyj Metoda filtra.

Klonuje div, wybierz wszystkie dzieci (zagnieżdżone divs), usuń je, a następnie "Wróć" do rodzica cloned div i pobrać tekst.

Posiadanie tekstu, porównaj zawartość z wyszukiwanym tekstem.

$("#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>
2
silentw 28 czerwiec 2017, 12:06

W wyufności powinno być inny selektor:

$("#masterdiv > div:contains('heinrich')")
2
teo van kot 28 czerwiec 2017, 11:57