jquery, если у div id есть дети

этой if - условие что дает мне тревогу:

if (div id=myfav has children) {
   do something
} else {
   do something else 
}

я попробовал все следующее:

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }
170
children jquery

8 ответов

if ( $('#myfav').children().length > 0 ) {
     // do something
}

Это должно работать. The children() функция возвращает объект JQuery, содержащий дочерние элементы. Поэтому вам просто нужно проверить размер и посмотреть, есть ли у него хотя бы один ребенок.

375

этот фрагмент определит, есть ли у элемента дети, использующие :parent селектор:

if ($('#myfav').is(':parent')) {
    // do something
}

отметим, что :parent также считает родительским элемент с одним или несколькими текстовыми узлами.

на div элементов <div>some text</div> и <div><span>some text</span></div> каждый будет считаться родителем, но <div></div> не является родителем.
49

другой вариант, просто для того, чтобы это было:

if ( $('#myFav > *').length > 0 ) {
     // do something
}

может быть самым быстрым, так как он строго использует двигатель Sizzle и не обязательно какой-либо jQuery, как это было. Хотя, возможно, ошибаешься. Тем не менее, это работает.

44

на самом деле для этого есть довольно простой собственный метод:

if( $('#myfav')[0].hasChildNodes() ) { ... }

обратите внимание, что это также включает в себя простые текстовые узлы, так что это будет верно для <div>text</div>.

15

а если вы хотите проверить див имеет детей определенным(скажем <p> использование:

if ($('#myfav').children('p').length > 0) {
     // do something
}
11

путь jQuery

в jQuery, вы можете использовать $('#id').children().length > 0 чтобы проверить, есть ли у элемента дети.

демо

var test1 = $('#test');
var test2 = $('#test2');

if(test1.children().length > 0) {
    test1.addClass('success');
} else {
    test1.addClass('failure');
}

if(test2.children().length > 0) {
    test2.addClass('success');
} else {
    test2.addClass('failure');
}
.success {
    background: #9f9;
}

.failure {
    background: #f99;
}
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<div id="test">
   <span>Children</span>
</div>
<div id="test2">
   No children
</div>

ваниль с JS так

если вы не хотите использовать jQuery, вы можете использовать document.getElementById('id').children.length > 0 чтобы проверить, есть ли у элемента дети.

демо

var test1 = document.getElementById('test');
var test2 = document.getElementById('test2');

if(test1.children.length > 0) {
    test1.classList.add('success');
} else {
    test1.classList.add('failure');
}

if(test2.children.length > 0) {
    test2.classList.add('success');
} else {
    test2.classList.add('failure');
}
.success {
    background: #9f9;
}

.failure {
    background: #f99;
}
<div id="test">
   <span>Children</span>
</div>
<div id="test2">
   No children
</div>
2

вы также можете проверить, есть ли у div конкретные дети или нет, 

if($('#myDiv').has('select').length>0)
{
   // Do something here.
   console.log("you can log here");

}
2

он не будет работать, Посмотрите на это исправление

<?php

use Behat\Behat\Context\ClosuredContextInterface,
    Behat\Behat\Context\TranslatedContextInterface,
    Behat\Behat\Context\BehatContext,
    Behat\Behat\Exception\PendingException;
use Behat\Gherkin\Node\PyStringNode,
    Behat\Gherkin\Node\TableNode;
use Behat\MinkExtension\Context\MinkContext;

/**
 * Features context.
 */
class FeatureContext extends MinkContext
{
    /**
     * Initializes context.
     * Every scenario gets its own context object.
     *
     * @param array $parameters context parameters (set them up through behat.yml)
     */
    public function __construct(array $parameters)
    {
        // Initialize your context here
    }
   /**
     * @When I wait for the suggestion box to appear
     */
    public function iWaitForTheSuggestionBoxToAppear()
    {
        $this->getSession()->wait(5000, "$('.suggestions-results').children().length > 0");
    }


     /**
      * @When /^I type "([^"]*)" into search box$/
      */
    public function iTypeTextIntoSearchBox($text)
    {
        $element = $this->getSession()->getPage()->findById('searchInput');
        $script = "$('#searchInput').keypress();";
        $element->setValue($text);
        $this->getSession()->evaluateScript($script); 
    }
}
0