2016-04-14 2 views
2

Что не так с этим кодом? В зависимости от условия я хочу установить двойную коричневую границу или сплошную синюю границу, но не имеет значения, какое условие я использую: if($(this).has("#tt")) или if(($(this).has("ssssssss"))) или что-то еще, он всегда ставит двойную коричневую границу ...упаковка метод используя функцию как параметр

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> 

ответ

3

Попробуйте это: .has() возвращающий объект, а не истинным или ложным. Вы можете использовать .has().length, который возвращает 1 i.e true, если он имеет сопоставленный объект, иначе 0 i.e false. Смотрите ниже код

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

2

Использование:

$(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() возвращает объект, каждый раз, присутствует ли в не совпадают, но .has(). length return 0 для отсутствия соответствия и возврата 1 для совпадения.

DEMO

Смежные вопросы