Develop Reference

jQuery selector problem: clicking one element will modify the immediate next element

I want to use jquery to slidedown the description classes when title classes are clicked. However, what I want to do is when a specific title is clicked, only the immediate next description should slidedown. How can I do that in one block of code?
$(document).ready(function(){
$(".title").click(function(){
$(".description").slideToggle();
})
})
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>

$(".description").slideToggle(); takes all elements with class=description, not just the one you want.
Use next() near the selected one title.
$(document).ready(function(){
$(".title").click(function(){
$(this).next(".description").slideToggle();
})
})

Only show parent if child contains certain string

I have a group of divs that appear on multiple pages, that have this pattern:
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagOne
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagTwo
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagThree
</div>
</div>
</div>
</div>
</div>
This group appears on multiple pages.
My ideal javascript/jquery solution is something like this:
display:none on all div class="entry"
if child div class="entry-title" contains #something, change parent div class="entry" to display:block
so that on Page One I can insert this code to only show #hashtagOne, on Page Two only #hashtagTwo, etc. etc.

Try something like this:
$('.entry-title').each(function(i,v){
if ($(this).text().trim().charAt(0) =="#") {
$(this).closest('.entry').show();
}
});
https://jsfiddle.net/0ybstx9o/

This simply works fine :
$(document).ready(function(){
$(".entry").each(function(){
if($(this).find(".entry-title:contains('#something')").length > 0){
$(this).css("display","block");
}
});
});

Its pretty simple, just use :contains() and .closest() together either on page load or whatever event you want this display:block behavior to run.
As you want to show based on differnt pages, I suggest to use page title and set it to title="Page One" and title="Page Two" etc and then compare it in document ready state and show accordingly the desired div
jQuery(document).ready(function(){
jQuery('div.entry').hide();
if(jQuery(document).find("title").text() == 'Page One')
{
jQuery( "div.entry-title:contains('#something')" ).closest('.entry').show();
}
else if(jQuery(document).find("title").text() == 'Page Two')
{
jQuery( "div.entry-title:contains('#something Else')" ).closest('.entry').show();
}
});

$(".entry").find(".entry-title").text(function(key, text) {
if (text.indexOf("#")>=0) {
$(this).parents(".entry").hide()
}
})
Here is the working Plunker

Hide parent div if child div is missing

Is it possible at all to hide a parent div if there is a child div missing?
In the example below I would like to hide the parent div of "#live-sessions" if some of the divs are missing such as .views-content and .views-row.
This is what it looks like when the divs are there:
<div id="live-sessions">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h3 class="session-title">Sessions Live Now</h3>
<div class="col-sm-9">
<div class-"view-display-id-live_sessions">
<div class="views-content">
<div class="views-row">
</div>
<div class="views-row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what it looks like when the divs are missing:
<div id="live-sessions">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h3 class="session-title">Sessions Live Now</h3>
<div class="col-sm-9">
<div class-"view-display-id-live_sessions">
</div>
</div>
</div>
</div>
</div>
I tried using the :empty selector with the parent method, but my child div contains some blank lines so it doesn't think it's empty. Also I would like to hide the parent of the parent of the empty div.
$(".view-display-id-live_sessions:empty").parent().hide();

You have a typo in your html:
class-"view-display-id-live_sessions"
should be
class="view-display-id-live_sessions"
you can try the following jQuery code:
if ($(".view-display-id-live_sessions").html().trim() == '') {
$(".view-display-id-live_sessions").parent().parent().hide();
}
jqVersion demo

Use jQuery has() in a negative if test - http://api.jquery.com/has/
if(!$('#parent').has('.child')){
$('#parent').hide();
}

There isn't a one-line-query for this. Following code would do the trick:
$('#live-sessions .row').each(function(idx, row) {
if ($(row).find('.views-content').length == 0) {
$(row).hide();
}
});

If you want to keep using jQuery, you could instead do:
if ( ! $(".view-display-id-live_sessions").children().length ) { /* your logic */ }
Note that there's a syntax error in your code:
<div class-"view-display-id-live_sessions">
Should be
<div class="view-display-id-live_sessions">

If you understand your question:
First you need to check the number of .views-row divs. If the length is zero hide the parent div.
Ex:
if ($('.views-row').length < 1)
$('#live-sessions').hide();
Good Luck.

You need to trim the blank spaces, correct a typo and test for the text within the div -
class="view-display-id-live_sessions" // note the equals sign after class
The code to do the hiding (EDIT re-read problem again):
var liveSessionsText = $.trim( $('.view-display-id-live_sessions').text() );
if(0 == liveSessionsText.length) {
$('.view-display-id-live_sessions').closest('.row').hide();
}
The div with class="row" is the parent of the parent of view-display-id-live_sessions.

how to append li tag into ul in angularjs?

I have a html like this
<div>
<div class="submain">
<div><ul><ul><div>
<div g-directive>click</div>
</div>
<div class="submain">
<div><ul><ul><div>
<div g-directive>click</div>
</div>
<div class="submain">
<div><ul><ul><div>
<div ng-directive>click</div>
</div>
<div>
when i click on particular div(click div), i want to append one li tag into the ul tag of before particular clicked div.
i have directive like this, i have tried this but it is not working
app.directive('ngDirective',function()
{
return function(scope,element,attrs)
{
element.bind('click',function()
{
element.prev().children('ul').append('<li></li>');
});
}
});
how to append li tag into ul that is children of div ?

Just a rough example of what you could do:
HTML
<div>
<div class="submain">
<div><ul>
<li ng-show="showLI">{{content}}</li>
<ul><div>
<div ng-click="toggleLI()">click</div>
</div>
<div>
JS
$scope.showLI = false;
$scope.toggleLI = function() {
$scope.showLI = !$scope.showLI;
}

Your code doesn't work, because of wrong element selector. .children searches only the first level of children elements, so basically <div class="submain"> doesn't have children element <ul>. You can use .find('ul') instead, it searches the whole tree downwards

Getting class name from div

I want to retrieve the class name of the last child element (class last div new3) in .find_class, but my code gives me class select3. How can I fix it?
Demo: http://jsfiddle.net/gBxan/5/
<div class="find_class mediumCell">
<div class="new1 old1">
<div class="select1"></div>
</div>
<div class="new2 old2">
<div class="select2"></div>
</div>
<div class="new3 old3"><!-- I want to get this div's class name 'new3' -->
<div class="select3"></div>
</div>
</div>
var find = $('div.find_class div:last').attr('class');
alert(find);

Use the child selector (>):
var find = $('div.find_class > div:last').attr('class');
Fiddle: http://jsfiddle.net/gBxan/6/
See also: MDN - CSS Selectors

$('.find_class').children(':last').attr('class');