Hide parent if child contains class - javascript

I followed this jQuery: Hide parent <td> if contains child <input> with specific class? but its not working in my code:
$(function() {
$(".video-list-item").filter(function() {
return $('span', this).hasClass('.view-count');
}).hide();
});
https://jsfiddle.net/xzeeuotL/

Two things to fix but you were close.
1) You did not include Jquery as a library for the JSFiddle
2) In the hasClass method you need to remove the . in the class name
$(function() {
$(".video-list-item").filter(function() {
return $('span', this).hasClass('view-count');
}).hide();
});
Here is a working fiddle
https://jsfiddle.net/rn2jzpfc/

You were close. Just one mistake in your code.
When you are checking if something hasClass there is no need to have the . preface it.
Also remember you need to include jquery.
$(function() {
$(".video-list-item").filter(function() {
return $('span', this).hasClass('view-count');
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-list-item">
<span class="view-count">HIDE THIS</span>
</div>
<div class="video-list-item">
<span>DON'T HIDE THIS</span>
</div>
You can do this without Jquery
Here is an example using pure javascript.
var divSel = document.querySelectorAll('.video-list-item > .view-count');
for (var i = 0; i < divSel.length; i++) {
divSel[i].parentElement.style.display = "none";
}
<div class="video-list-item">
<span class="view-count">HIDE THIS</span>
</div>
<div class="video-list-item">
<span>DON'T HIDE THIS</span>
</div>
Hope this helps.

The next code returns the parent with video-list-item class of elements with view-count class; then hide the parent. I thinks it's more easy than your approach:
$(".view-count").closest('.video-list-item').hide();
Updated JSFiddle: https://jsfiddle.net/tomloprod/xzeeuotL/2/

Another solution:
$(function() {
$('.video-list-item').find('span.view-count').hide();
});

You have to change that syntax for your case.
you have to be sure that your <td> has a class name like ".video-list-item" and later change in the $('span', this) for $('input', this), of course, you input would has a class name like view-count. something like this..
$(function() {
$(".video-list-item").filter(function() {
return $('input', this).hasClass('view-count');
}).hide();
});
<td class="video-list-item">
<input class="view-count">
</td>
i hope it can help you.. nice day!!

Useful thing if you want to remove closest parent that contains child with specific class:
<div class="closest_parent">
<div></div>
<div class="child_class"></div>
</div>
$('.child_class').closest('.closest_parent').remove();

Related

Call function on element (that does not have unique id) on hover

When hovering over generic elements of the same type, I want to execute a function on this elements that will perform an animation. However as these elements do not have unique ids I'm not sure how to uniquely identify them in JavaScript. Is there a way to use the this key word for this? I do not want to give them all unique ids because a huge amount of the same element and it seems redundant. Any help would be greatly appreciated thanks.
Heres some code I was playing with to try and get this to work. Preferably the simpler the code or using basic javascript better.
$(document).ready(function(){
$("span").hover(function(){
this.color = red;
});
});
red is not a variable, it is a string. So that you have to use 'red':
To set the color using JavaScript you have to use style property :
$(document).ready(function(){
$("span").hover(function(){
this.style.color = 'red';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>
OR: Using jQuery use .css()
$(document).ready(function(){
$("span").hover(function(){
$(this).css({color: 'red'});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>
You can user class as a selector
give the same class to all <span> element
Try Following
$('.hoverTest').hover(function(){
$(this).css("color", "red");
}, function(){
$(this).css("color", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='hoverTest'>Your Span Element</span><br/>
<span class='hoverTest'>Span 1</span><br/>
<span class='hoverTest'>Span 2</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span n</span>
Refer Jquery Hover() for more details

jQuery - Hide DIV which has a span element with certain text inside

I have several divs with the same class names and varying IDs. The ID is not set for the text I need to target
I need to target the Telephone Call text. If the div contains that text, how do I hide the containing div
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
</div>
I have tried the following to no avail
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").hide ();
});
</script>
If your code is hiding the span, but not the parent div, you can target the div to be hidden using mostly the same code you already wrote.
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").parent().hide();
});
</script>
Try selecting it's child instead of the element itself :
$(document).ready(function() {
$(".rn_FieldDisplay *:contains('Telephone Call')").hide ();
});
Try with find() function
$(document).ready(function() {
$(".rn_FieldDisplay").find(":contains('Telephone Call')").hide ();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
<p class="rn_DataLabel">Telephone Call </p>
</div>
Well you can try this:
if ($(".rn_FieldDisplay > span:contains('Telephone Call')").length > 0) {
$(".rn_FieldDisplay > span").hide();
}

JQuery anchor click function

I am trying a way to click a anchor tag using Jquery which is inside multiple div.
Below is my code:
<div class="mainDiv">
<div id="secondDiv" class="check">
<div class="iteratorDiv1" id="id1">
link text
</div>
<div class="iteratorDiv2" id="id2">
link text
</div>
<div class="iteratorDiv3" id="id3">
link text
</div>
<div class="iteratorDiv4" id="id4">
link text
</div>
</div>
</div>
Now if i do something like this
$(".iteratorDiv1 a").live('click',function(e)
{
alert("hey working");
});
But using this approach i will have to write this function for iteratorDiv2,iteratorDiv3 and iteratorDiv4 also.
Is there any way i can identify the anchor click from the mainDiv something like below. This did not work though.
$(".mainDiv a").live('click',function(e)
{
alert("hey working");
});
I am just trying to prevent repeatative coding. Any guidance.
Please check the following jsFiddle:
http://jsfiddle.net/amoolya93/1xL9od85/3/
Your code works fine until Jquery version 1.8.3 .For later versions, please use the following:
$('.mainDiv a').on('click',function(e)
{ alert("hey working");
});
I just did some test here, and seem to work.
You might tell jQuery where exactly your "a" is, so you can try something like this:
$(".mainDiv div > a").on("click", function () {
alert("Hey it's working");
});
or
$(".mainDiv a").on("click", function () {
alert("Hey it's working");
});
$("a").on('click',function(e)
{
var parent = $(this).parent();
alert(parent.attr(class)) ;
});
Use .parent() method to get parent of any link you clicked.

jQuery - If DIV class equals X, hide all other DIVs with a different class

I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.
So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});
try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});
Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});
to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.
$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});
You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.

How do I get the content of a <span> using jQuery?

How do I get the content 'This is my name' of the span?
<div id='item1'>
<span>This is my name</span>
</div>
I think this should be a simple example:
$('#item1 span').text();
or
$('#item1 span').html();
$("#item1 span").text();
Assuming you intended it to read id="item1", you need
$('#item1 span').text()
$('#item1').text(); or $('#item1').html(); works fine for id="item1"
Since you did not provide an attribute for the 'item' value, I am assuming a class is being used:
<div class='item1'>
<span>This is my name</span>
</div>
alert($(".item span").text());
Make sure you wait for the DOM to load to use your code, in jQuery you use the ready() function for that:
<html>
<head>
<title>jQuery test</title>
<!-- script that inserts jquery goes here -->
<script type='text/javascript'>
$(document).ready(function() { alert($(".item span").text()); });
</script>
</head>
<body>
<div class='item1'>
<span>This is my name</span>
</div>
</body>
You could use id in span directly in your html.
<span id="span_id">Client</span>
Then your jQuery code would be
$("#span_id").text();
Some one helped me to check errors and found that he used val() instead of text(), it is not possible to use val() function in span.
So
$("#span_id").val();
will return null.
In javascript wouldn't you use document.getElementById('item1').innertext?
$('span id').text(); worked with me
$('#id span').text() is the answer!
$('#item1 span').html(); Its working with my code
VERY IMPORTANT Additional info on difference between .text() and .html():
If your selector selects more than one item, e.g you have two spans like so
<span class="foo">bar1</span>
<span class="foo">bar2</span>
,
then
$('.foo').text(); appends the two texts and give you that; whereas
$('.foo').html(); gives you only one of those.
<script>
$(document).ready(function () {
$.each($(".classBalence").find("span"), function () {
if ($(this).text() >1) {
$(this).css("color", "green")
}
if ($(this).text() < 1) {
$(this).css("color", "red")
$(this).css("font-weight", "bold")
}
});
});
</script>

Categories