Wrap-Methode mit Funktion als Parameter

Question

Was ist falsch an diesem Code? Abhängig von der Bedingung, die ich einen doppelten braunen Rand oder einen festen blauen Rand einstellen möchte, aber es ist egal, welchen Zustand ich verwende: if($(this).has("#tt")) oder if(($(this).has("ssssssss"))) oder was auch immer, es setzt immer doppelten braunen Rand ...

Jquery :

$(document).ready(function() { 
    $(".divvv").wrap(function() { 
     if ($(this).has("#tt")) { 
      return $("<div/>").css("border","double thick brown") 
     } 
     else { 
      return $("<div/>").css("border","solid blue") 
     } 
    }) 
}) 

Html:

<div id="firstdiv" class="divvv"> 
<label class ="lab" id="tt" for="two">2</label> 
    <input type="checkbox" value="2" id="two" /> 
    <label class ="lab" for="four">4</label> 
    <input type="checkbox" value="4" id="four" /> 
</div> 

<div class="divvv" id="secdiv"> 
<button id="bu">Here</button><button id="bubu"> Button</button> 
    <label id="second">This is the <span style="color:aqua">second</span> label</label> 
    <label>This is the third label</label> 
     </div> 

Answer 1

Try this: .has() ein Objekt zurückkehrt und nicht wahr oder falsch. Sie können .has().length verwenden, die 1 zurückgibt, d. H. True, wenn das Objekt dem Objekt 0 entspricht, d. H. False. Siehe unten Code

$(document).ready(function() { 
 
    $(".divvv").wrap(function() { 
 
     if ($(this).has("#tt").length) { 
 
      return $("<div/>").css("border","double thick brown") 
 
     } 
 
     else { 
 
      return $("<div/>").css("border","solid blue") 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="firstdiv" class="divvv"> 
 
<label class ="lab" id="tt" for="two">2</label> 
 
    <input type="checkbox" value="2" id="two" /> 
 
    <label class ="lab" for="four">4</label> 
 
    <input type="checkbox" value="4" id="four" /> 
 
</div> 
 

 
<div class="divvv" id="secdiv"> 
 
    <button id="bu">Here</button><button id="bubu"> Button</button> 
 
    <label id="second">This is the <span style="color:aqua">second</span> label</label> 
 
    <label>This is the third label</label> 
 
</div>

Answer 2

Verwendung:

$(document).ready(function() { 
    $(".divvv").wrap(function() { 
     if ($(this).has("#tt").length) { 
      return $("<div/>").css("border","double thick brown") 
     } 
     else { 
      return $("<div/>").css("border","solid blue") 
     } 
    }) 
}) 

HTML

<div id="firstdiv" class="divvv"> 
<label class ="lab" id="tt" for="two">2</label> 
    <input type="checkbox" value="2" id="two" /> 
    <label class ="lab" for="four">4</label> 
    <input type="checkbox" value="4" id="four" /> 
</div> 

<div class="divvv" id="secdiv"> 
<button id="bu">Here</button><button id="bubu"> Button</button> 
    <label id="second">This is the <span style="color:aqua">second</span> label</label> 
    <label>This is the third label</label> 
     </div> 

.has() geben ein Objekt jedes Mal, ob Übereinstimmung der nicht vorhanden ist, aber .has(). Länge gebe 0 für kein Match zurück und gib 1 für ein Match zurück.

DEMO