jquery - Loop through parent elements and if child element doesnt exist display text -
I am trying to think about how to loop through all the basic classes (.grid) and if In this case, with no child div or class (.image-container), then display in the (.grid) section (content-container).
HTML:
& lt; Style & gt; .grid .content-container {display: none; } & Lt; / Style & gt; & Lt; Div class = "grid" & gt; & Lt; Div class = "art" & gt; & Lt; Div class = "image-container" & gt; & Lt; Img src = "image url" /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "title" & gt; Title Text & lt; / Div & gt; & Lt; Div class = "content-container" & gt; Some content goes here & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "grid" & gt; & Lt; Div class = "art" & gt; & Lt; / Div & gt; & Lt; Div class = "title" & gt; Title Text & lt; / Div & gt; & Lt; Div class = "content-container" & gt; Some content goes here & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "grid" & gt; & Lt; Div class = "art" & gt; & Lt; Div class = "image-container" & gt; & Lt; Img src = "image url" /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "title" & gt; Title Text & lt; / Div & gt; & Lt; Div class = "content-container" & gt; Some content goes here & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "grid" & gt; & Lt; Div class = "art" & gt; & Lt; Div class = "image-container" & gt; & Lt; Img src = "image url" /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "title" & gt; Title Text & lt; / Div & gt; & Lt; Div class = "content-container" & gt; Some content goes here & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "grid" & gt; & Lt; Div class = "art" & gt; & Lt; / Div & gt; & Lt; Div class = "title" & gt; Title Text & lt; / Div & gt; & Lt; Div class = "content-container" & gt; Some content goes here & lt; / Div & gt; & Lt; / Div & gt;
Something like this should work:
$ ('.grid'). Each (function () {if ($ (this) .find ('.image-container'). Length == 0) {// no children $ (this) .find ('content-container'). Show ( );}});
Comments
Post a Comment