third - jquery si div id tiene hijos

jquery parent

Question

Esta if condición es lo que me está causando problemas:

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

Intenté todo lo siguiente:

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

Answer 1

La forma jQuery

En jQuery, puede usar $(''#id'').children().length > 0 para probar si un elemento tiene hijos.

Manifestación

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>

La vainilla JS forma

Si no desea usar jQuery, puede usar document.getElementById(''id'').children.length > 0 para probar si un elemento tiene hijos.

Manifestación

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>

Answer 2

En realidad, hay un método nativo bastante simple para esto:

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

Tenga en cuenta que esto también incluye nodos de texto simple, por lo que será cierto para un <div>text</div> .

Answer 3

Este fragmento determinará si el elemento tiene hijos usando el selector: :parent

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

Tenga en cuenta que :parent también considera un elemento con uno o más nodos de texto para ser uno de los padres.

Por lo tanto, los elementos div en <div>some text</div> y <div><span>some text</span></div> se considerarán como uno de los elementos principales, pero <div></div> no es uno de los elementos principales.

Answer 4

Otra opción, solo por el simple hecho de eso sería:

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

De hecho, puede ser el más rápido, ya que utiliza estrictamente el motor Sizzle y no necesariamente cualquier jQuery, por así decirlo. Sin embargo, podría estar equivocado. Sin embargo, funciona.

Answer 5

También puedes verificar si div tiene hijos específicos o no,

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

}

Answer 6

no funcionará echa un vistazo a esta solución

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

Answer 7

y si desea verificar que div tiene un hijo particular (digamos <p> use:

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

Answer 8

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

Esto debería funcionar. La función children() devuelve un objeto JQuery que contiene los elementos secundarios. Entonces solo necesita verificar el tamaño y ver si tiene al menos un hijo.