I made a snippet and I am working a jQuery show/hide when the data attr matches.
HTML structure is like below
<div class="container">
<div class="item" data-item="1">1
<div class="inside" data-content="1">
</div>
</div>
<div class="item" data-item="2">2
<div class="inside" data-content="2">
</div>
</div>
<div class="item" data-item="2">3
<div class="inside" data-content="3">
</div>
</div>
</div>
the class class="item" will be append (ed) to outside div, I'd like to achieve that,
if content data-num is existing, do not "append()", show()instead, then the slides can be showed properly. I wanted to learn how to check if data-num existing?
so the concept is like that,
if click on class item if item 's data-item(e.g. data-item = "2") matches outside > content data-num (e.g data-num = "2" ), then show() that content class.
Hope I made it clear. Thanks a lot.
Here is online sample: http://jsfiddle.net/8VD9R/
You have to iterate over the content class.
I am writing the sample code here ,Please update it accordingly:
$('.item').click(function(){
$('.content').hide();
$('.content').each(function(i, obj) {
if($(this).attr('data-item')==$(obj).attr('data-num'))
{
$(obj).show();
return;
}
});
});
Related
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
There is a bootstrap carousel that is changing automatically:
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
Only one div is set to active at a time, and it cycles through like that.
How can I bind all of carousel's children to another element so that it can set it's specific child to be active as well.
For example:
<div id="copy-cat">
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
</div>
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
How can I bind copy-cat to have the same child active as carousel? Keep in mind, I don't want to copy all of the class attributes- just detect that one is active, and set that same numbered child to active also.
I'd use Bootstrap's slid event callback:
http://jsfiddle.net/isherwood/6xF7k/
$('#carousel').on('slid.bs.carousel', function () {
// get the index of the currently active panel
var myIndex = $(this).find('div.active').index();
// set the element with that index active, deactivating the others
$('#copy-cat').find('li').removeClass('active').eq(myIndex)
.addClass('active');
})
Notice that I changed #copy-cat to ul to make it valid HTML.
http://getbootstrap.com/javascript/#carousel-usage
Given an element x, you can get the index of x in its parent's .children() by calling x.index(). In your example, $("div.active").index() would return 0, the div following would return 1, etc. So you should be able to do something like the following:
$("#copy-cat :nth-child("+(1+$("#carousel div.active").index()) + ")").addClass("active");
(nth-child is 1-index-based, so you need to add 1. You could also call eq(), which is 0-based.)
See this jsFiddle for a rough example.
But this is only a general answer. If there are Bootstrap methods for this purpose, by all means use them.
The Bootstrap carousel has some events that you can tap into.
Information about the events can be found in the "Events" section under the Carousel documentation.
I would recommend doing something like:
<div id="copy-cat">
<div id="copy-1" class="active"></div>
<div id="copy-2" class=""></div>
<div id="copy-3" class=""></div>
<div id="copy-4" class=""></div>
</div>
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" data-transition-to="#copy-1">
<p>something1</p>
</div>
<div class="item" data-transition-to="#copy-2">
<p>something2</p>
</div>
<div class="item" data-transition-to="#copy-3">
<p>something3</p>
</div>
<div class="item" data-transition-to="#copy-4">
<p>something4</p>
</div>
</div>
</div>
Add a listener as described in the event section, and inspect the relatedTarget.
Use the data-transition-to to figure out the class to add the active class to.
Javascript to support this approach:
$('#carousel').carousel({
interval:false //or whatever options you want
});
$('#carousel').on('slide.bs.carousel',function (event) {
$('#copy-cat .active').removeClass('active');
$(event.relatedTarget.dataset.transitionTo).addClass('active');
});
$('#carousel').carousel('next');
This is is the fiddle ...I disabled transitioning & you will have to inspect the DOM to see that the copy-cat div is being changed.
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.
i am using IPB and i am going to put each category into a new tab the category div is something like this:
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
and my tabs content is like this:
<div class="content">
<div id="content-1" class="content-1">
</div>
</div>
and the categories divs is already showing but i want it to be moved to the content-1 div without duplicate so i want it to move from its div to this div with jjava script how?
<script>
document.getElementById('content-1').appendChild(
document.getElementById('category_100')
);
</script>
this worked for me but how can i add more than id to category_100
i want it to be like this in one script code so i would not repeart the scrip code four times:
<div class="content">
<div id="content-1" class="content-1">
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
</div>
</div>
using my two lines the suggested things here is not working!
Try this code :
$('div[id^="category_"]').appendTo('#content-1')
Have a look to this fiddle : http://jsfiddle.net/lulu3030/sjEPx/2/
"using my two lines the suggested things here is not working!"
You just get a single element with an ID and trying to append it...
Live Demo
If you want to append multiple elements, there are many ways...
Wrap those elements and then append...
<div id="categories">
<div id='category_100'></div>
<div id='category_104'></div>
<!-- etc. -->
</div>
document.getElementById('content-1').appendChild(document.getElementById('categories'));
or add same class to all elements that you want to append...
<div id='category_100' class="myClass"></div>
<div id='category_104' class="myClass"></div>
[].forEach.call(document.getElementsByClassName("myClass"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
or get elements with query selector that match some pattern...
[].forEach.call(document.querySelectorAll("div[id^='category_']"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
and etc.
I have something like this in my page:
<div id="test">
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test
<div class="container">
<div class="item">Test2</div>
<div class="item">Test2</div>
<div class="item">Test2</div>
</div>
</div>
</div>
Now I want to do something like this:
$.each(this.find(".item"), function(index, value) {
$(value).html("Test" + $(value).html());
});
Of course I want to do some more stuff inside the loop, but this is only an example. When I do this, all "Test" change into "TestTest", but "Test2" does not change into "TestTest2". Is there a way to select these items, even if there are inside another one? Btw: There could be a conatiner in every item. Even in those who are already nested.
The call to $(value).html("Test" + ...) actually removes and re-adds elements, so any descendent elements (with class item) that are iterated over have already been removed from the DOM.
Try the following:
this.find(".item").each(function(index, value) {
$(value).prepend("<span>Test</span>");
});