I have a website into modx cms, I'm trying to remove or hide a div when into that div there is no tag.
How can I do this?
I tried this but no luck:
jQuery(function($) {
if ($(".pages a")) {$(".pages").remove();}
});
< div class="pages">[+previous+] [+pages+] [+next+]< /div>
If you are trying to check if the <a> tag exists inside the div then you could try:
if($(".pages a").length == 0) {
// links don't exist
$(".pages").remove();
} else {
// links exist
}
another shorter answer would be
$('.pages:not(:has(>a))').css("display", "none");
click to see...
reference jQuery.not()
I'm not sure if this is what you want:
$(function($) {
$(".pages").each(function(){
if(!$(this).find('a').length)
$(this).remove();
});
});
Hide it this way, so that you can show them up when there are links:
if ($(".pages a").length == 0) {
$(".pages").hide();
}
And when the links are there, or you making an AJAX call, do this:
$(".pages").show();
Related
I've been searching for a while for answer but nothing really helped me in my problem.
I have div inside and li element (to position in at the bottom of that li element).
I've made some functions to show and hide that div when user clicks on that li element, but I want to stop hiding it when it is clicked (not a li element).
Here are my functions:
$(document).ready(function() {
$("#panel-user-item").click(function( e ){
e.preventDefault();
toggleUserPanel();
});
/*$(document).mouseup(function(e)
{
var subject = $("#panel-user-panel");
if(e.target.id != subject.attr('id') && !subject.has(e.target).length)
{
subject.hide(300);
subject.addClass("hide");
}
});*/
});
function toggleUserPanel()
{
if(!$("#panel-user-panel").hasClass("hide"))
{
$("#panel-user-panel").hide(300);
$("#panel-user-panel").addClass("hide");
}
else
{
$("#panel-user-panel").show(300);
$("#panel-user-panel").removeClass("hide");
}
}
Is there a way to do something like that? I'v been searching for few hours already and didn't find any good solutions. Thanks for any help.
event.stopPrapagation() is what you're looking for.
Did you try
e.stopPropagation()
I have an HTML document and I want to check is there any visible div element with Jquery after page load.
After document ready function multiple div elements will be generated by some js function and I want to check these div elements generated or not.
I have found below code but it checks with ID but I don't have any ID;
function checkContainer () {
if($('#divID').is(':visible'))){
createGrid();
}else {
setTimeout(checkContainer, 50);
}
}
I want to check is there any visible div element with JQuery
if ($("div:visible").length)
This will return true if at least 1 div is visible
If any div, I think that's enough :
if($('div')){console.log('present');}
Why don't you try searching for div instead of div Id:
function checkContainer () {
if($("div").is(':visible'))){
createGrid();
}else {
setTimeout(checkContainer, 50);
}
}
I uploaded my code into jsfiddle:
https://jsfiddle.net/r26q9ssu/
I'm trying to toggle the div.que-answer when I click on
div.pull-left.circle.sh-answer
$("div.question div.sh-answer").click(function(){
$(this).find("div.que-answer").show();
});
If u can see there is a multiple div called question, I don’t remember how to do that I am a little rusty.
You should use $(this).parent().next() instead DEMO
$("div.question div.sh-answer").click(function() {
$(this).parent().next("div.que-answer").toggle();
});
Also if you want to hide siblings and add slide effect you can do it like this DEMO
$("div.question div.sh-answer").click(function() {
$(this).parent().next("div.que-answer").slideToggle();
$("div.que-answer").not($(this).parent().next("div.que-answer")).slideUp();
});
the final results with changing content:
$("div.question div.sh-answer").click(function() {
if($(this).html() == '+'){
$("div.que-answer").hide(300);
$(this).parent().next("div.que-answer").toggle(300);
$("div.question div.sh-answer").html("+");
$(this).html("-");
}else{
$("div.question div.sh-answer").html("+");
$(this).parent().next("div.que-answer").toggle(300);
}
});
I have my code on jsfiddle which has 2 divs, where the user can select features by clicking on a div. in the opposite div i have the same item but hidden. how can i replace the hidden class?
this is what i have come up with:
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').prev().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
http://jsfiddle.net/X6xcj/9/
is this:
$(this).find('.feature-options1').hide();
$('#label2').find('.feature-options1').show();
what you are trying to achieve?
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().next().next().find('#Label2').removeClass('hidden');
});
Try this i may help you.
You should use .parent() not .prev() to get the containing div
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').parent().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
Here you go: http://jsfiddle.net/5W48X/
.prev() gives you the previous sibling element.
.parent() gives you the container (parent) element.
EDIT:
I had not even seen the id's you use on divs yet. This should work as well:
$("#Label1").click(function () {
$(this).addClass('hidden');
$('#Label2').removeClass('hidden');
});
http://jsfiddle.net/6Zbsa/
try this:
$(function(){
$(".feature-addons").on('click', function(e){
var lbl = $(this).next();
$(".feature-addons").next().addClass('hidden');
lbl.removeClass('hidden');
});
});
I want to know how I can change the content of a specific div that has data attribute.
I am using a click event and .html
I have many div elements as follows:
<div class"name-of-class" data-user-id="ID">Content that changes</div>
I already have the ID variable to identify what div I need to change
$('.name-of-class').click( function() {
$('.name-of-class').html('new content');
}
So, I want to use the data attribute data-user-id inside the click function to specify exactly what div I need to change.
I hope I am making myself clear, if not, I will try to explain myself better.
You can use Attribute Equals Selector [name="value"].
$('.name-of-class').click( function() {
$('[data-user-id="id"]').html('new content');
}
Edit, based on comments, to pass variable
$('.name-of-class').click( function() {
$('[data-user-id="'+ idVariable +'"]').html('new content');
}
Use this:
HTML:
<div class="name-of-class" data-user-id="ID">Content that changes</div>
jQuery:
$('.name-of-class').click( function() {
$(this).html('new content');
});
You can use Attribute Equals Selector [name="value"]
$('.name-of-class').click( function() {
$('.name-of-class[data-user-id="id"]').html('new content');
}
EDIT
As per comment
$('.name-of-class').click( function() {
$('.name-of-class[data-user-id="' + useridvariable +'"]').html('new content');
}