How can I separate div from another class? - javascript

In my WordPress based website a plugin automatically wraps every element in the post content with <ul></ul>. That wraps everything even the <div>s which is invalid.
I want to unwrap certain elements and tried jQuery .unwrap . But I am able to unwrap some elements except a few div elements.
Here is the code:
<div class="post-content">
<p>Example post content</p>
<ul class="plugin_class">
<li>test</li>
<li>test</li>
<ul>
<div class="button-main-wrap">
<span class="button-abc">
<span>
Website link
</span>
</span>
<span class="button-abc"></span>
<span class="button-abc"></span>
</div>
</ul>
<ul>
<div class="number">hundred</div>
<div class="number">thosand</div>
</ul>
</ul>
<div>
<div>This content is okay</div>
<div>This content is okay</div>
</div>
</div>
From the above code, I want to separate <div class="button-main-wrap"> from <ul class="plugin_class"> or stop the <ul class="plugin_class"> to wrap elements which doesn't belong to it. ex: the div <div class="button-main-wrap"> or other elements like <div class="number">.
I tried these:
jQuery("ul").find('.button-main-wrap').unwrap();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-content">
<p>Example post content</p>
<ul class="plugin_class">
<li>test</li>
<li>test</li>
<ul>
<div class="button-main-wrap">
<span class="button-abc">
<span>
Website link
</span>
</span>
<span class="button-abc"></span>
<span class="button-abc"></span>
</div>
</ul>
<ul>
<div class="number">hundred</div>
<div class="number">thosand</div>
</ul>
</ul>
<div>
<div>This content is okay</div>
<div>This content is okay</div>
</div>
</div>
This unwraps all the <ul> elements in .post-content which I don't want.
jQuery(".plugin_class").find('.button-main-wrap').unwrap();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-content">
<p>Example post content</p>
<ul class="plugin_class">
<li>test</li>
<li>test</li>
<ul>
<div class="button-main-wrap">
<span class="button-abc">
<span>
Website link
</span>
</span>
<span class="button-abc"></span>
<span class="button-abc"></span>
</div>
</ul>
<ul>
<div class="number">hundred</div>
<div class="number">thosand</div>
</ul>
</ul>
<div>
<div>This content is okay</div>
<div>This content is okay</div>
</div>
</div>
This doesn't do anything.
I put all the code together in this Fiddle.
How to separate the div and stop the to wrap elements un-necessarily?

It is because div is not a valid child of ul, so wrap the contents of the ul with li then unwrap the li elements so that the parent ul will get removed
$('.plugin_class > ul').each(function(){
$(this).wrapInner('<li />').contents().unwrap()
})
Demo: Before, After

Related

Why is my website displaying <ul> and <li> in the dom

I'm trying to display cards in my dom but in the text im showing there is some code as shown in the picture below
<div class="app">
<h1> All Fishes and Their Photos</h1>
<ul v-for="(fish, i) in fishes" :key="i" />
<li>
<div class="maincontainer">
<div class="back">
<p>{{fish['Biology']}}</p>
</div>
<div class="front">
<div class="image">
<img :src="fish['Species Illustration Photo'].src" />
<h2>{{ fish['Species Name']}}</h2>
</div>
</div>
</div>
</li>
</ul>
</div>
Remove the '/' you have at the end of the first <ul> tag, this should fix the problem, but also consider using the v-for on the <li> tag, and not the <ul> tag as
the element that must be repeated many times is <li>.

Hide the content based on Children class

I need one help with the code, I have two HTML div blocks with the same class name and there is one extra h2 tag with different class present in one div block. I want to hide if h2 class name is not present in that div and show if the h2 class name is present. Please find the below mentioned code that I have created.
-- First block Div --
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display</p>
</div>
</div>
-- Second block Div --
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>
-- jQuery Code --
$(document).ready(function () {
if ($(".course-content").find(".accesshide")) {
$(".course-content").find(".topics").show();
} else if ($(".course-content").find(".single-section")) {
$(".course-content").find(".topics").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display (this statement is inaccurate)</p>
</div>
</div>
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display (this statement is inaccurate)</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>
Since the controls are independent events, they should be evaluated separately. Therefore, two separate if blocks should be used. In the second event in the solution below, the first child element of the parent element of the selected element is hidden by selecting it.
$(document).ready(function () {
if ($(".course-content").find(".accesshide")) {
$(".course-content > .accesshide").find(".topics").show();
}
// Because both <div> elements have the ".topics" class style applied, the ".single-section"
// element is selected and the first child element of the parent element is hidden.
if ($(".course-content").find(".single-section")) {
$(".course-content > .single-section").parent().children(':first-child').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display</p>
</div>
</div>
<hr>
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>
This is trivial using a CSS child selector (>). Just find the collection of elements that are an accesshide child of a course-content and hide the topics child of their parents.
You could do something similar with a descendant selector ( ), but since you know it's a child for this case, the child selector is perhaps more accurate.
MDN's Child Combinator docs.
$(document).ready(function () {
$('.course-content>.accesshide').parent().find('.topics').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display</p>
</div>
</div>
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display (this should actually be shown - there's no h2 in the parent div)</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>
I want to hide if h2 class name is not present in that div and show if the h2 class name is present.
You don't need any JS code, just only CSS with adjacent or general sibling combinator. For example:
.course-content .topics {
display: none;
}
.course-content .accesshide + .topics {
display: block;
}
When you have to use jQuery then you can use the same logic and the .next() method (or .nextAll()):
$(".course-content").find(".topics").hide();
$(".course-content").find(".accesshide").next(".topics").show();
If the controlled block can be both before and after the control block, the shortest way is to use the .siblings() method. If you need to show the .topics block if there is an .accesshide block or a .single-section block nearby, you can use this jQuery method for both cases:
$(document).ready(function () {
$(".course-content").find(".topics").hide();
$(".course-content").find(".accesshide, .single-section").siblings(".topics").show();
});
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>There are no special blocks nearby</p>
</div>
</div>
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Show because of the .accesshide block</li>
</ul>
<div class="row">
<p>Case 1</p>
</div>
</div>
<div class="course-content">
<ul class="topics">
<li class="data-list">Show because of the .single-section block</li>
</ul>
<div class="single-section">
<p>Case 2</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

css selector for visible only first section content

I have a JavaScript toggle so T need to tried to collapse all sections on load by default - by inserting
ul.section-content{
display:none;
}
and it is working. But when I tried to hide first-child or not first-child it is not working.
.cscr .csec .section ul:first-of-type {
display: none;
}
<div class="cscr">
<ul class="csec">
<li class="section">
<div class="section-header">
<div class="section-left">
<h5>section01</h5>
<p>hello1</p>
</div>
<div class="section-meta">
</div>
</div>
<ul class="section-content">
<li class="course-item">
<h1>lesson01</h1>
</li>
</ul>
</li>
<li class="section">
<div class="section-header">
<div class="section-left">
<h5>section02</h5>
<p>hello1</p>
</div>
<div class="section-meta">
</div>
</div>
<ul class="section-content"> /* to hide this */
<li class="course-item">
<h1>lesson02</h1>
</li>
</ul> /* to hide this */
</li>
</ul>
</div>
second case:
and how to display only first and not others with help of not-first-child
screenshot of what is needed
Do you want something like this? https://codepen.io/anon/pen/YOOXOv. Change the CSS properties to whatever you want.
Here you are selecting all sections except the first one and then selecting ul inside them.

Hide/Show div not working

Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.
$('a.common').click(function() {
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
The problem was that you had $('a.button') instead of $('a.common')
You also want a css to hide the divs at the beginning.
And also when you fade in a new div, you need to hide the current one.
$('a.common').click(function() {
var id = $(this).attr('href');
$("#divs div").hide();
$(id).fadeIn('slow', function() {
// Animation complete
});
});
#divs div {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="divs">
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
</div>
The problem is in your jQuery selector:
//This ona means that you are searching for tag a with class button
$('a.abutton').click(function() {})
//You should use:
$('a.common').click(function() {})
// Because your a tags has class 'common'
There was 2 problem
Your <div> tag is not closed properly in your <li>
Initially you are not hiding your div so it can be fade in once you click on it.
Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/
First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.
So hide them first. Then call fadeIn on click and at the same time hide the div present already.
$(document).ready(function() {
$('a.common').click(function() {
hideAllDivs();
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
var hideAllDivs = function() {
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
}
hideAllDivs();
$('#div1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>

Changing div content on hover in another element

have been scratching my head over this for the past few days, basically the functionality I am going for is that I have a <ul> with 7 <li> elements and then I have another section with 7 <p> elements. What I am looking for is that when I hover on one of the <li> elements it puts the text from the corresponding <p> element. The thing is that I cannot play directly with the text or inject via jQuery, because the content in the <p> are references to yaml files. I have hidden all the elements except the first one which should appear on pageload, and then I guess there is a way of hiding the <p>'s and showing only the corresponding one. Thanks in advance! please find attached the code snippet:
<section class="container clearfix">
<div class="text-center">
<ul class="solutions-items">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</section>
<section class="container clearfix">
<div class="text-center solutions-text-p">
<p class="">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<button class="solutions-learnmore-btn">{% yaml reference %}</button>
</div>
</section>
If you mean you want to show the corresponding p when hovering an li, you can do it by index, or by associating them with a data-* attribute.
Here's an example by index:
We hook mouseenter on the list, delegated so that we only receive the event when it relates to one of the lis
When we get the event, we get the index of that li relative to its siblings
Then we grab the paragraphs in the solutions-text-p div, make sure they all have the hidden class, then remove it from the one with the same index as the li
Live Copy - I've made the jQuery part fairly verbose for clarity:
$(".solutions-items").on("mouseenter", "li", function() {
var index = $(this).index();
var paras = $(".solutions-text-p p");
paras.addClass("hidden");
paras.eq(index).removeClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container clearfix">
<div class="text-center">
<ul class="solutions-items">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</div>
</section>
<section class="container clearfix">
<div class="text-center solutions-text-p">
<p class="">First</p>
<p class="hidden">Second</p>
<p class="hidden">Third</p>
<p class="hidden">Fourth</p>
<p class="hidden">Fifth</p>
<p class="hidden">Sixth</p>
<p class="hidden">Seventh</p>
<button class="solutions-learnmore-btn">{% yaml reference %}</button>
</div>
</section>
Here's a less verbose version of the jQuery:
$(".solutions-items").on("mouseenter", "li", function() {
$(".solutions-text-p p")
.addClass("hidden")
.eq($(this).index())
.removeClass("hidden");
});
You can use the mouse enter event and index of the hovered element to show/hide the target elements
var $ps = $('.solutions-text-p p')
$('.solutions-items li').mouseenter(function() {
var $cur = $ps.eq($(this).index()).show();
$ps.not($cur).hide();
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container clearfix">
<div class="text-center">
<ul class="solutions-items">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</section>
<section class="container clearfix">
<div class="text-center solutions-text-p">
<p class="">1</p>
<p class="hidden">2</p>
<p class="hidden">3</p>
<p class="hidden">4</p>
<p class="hidden">5</p>
<p class="hidden">6</p>
<p class="hidden">7</p>
<button class="solutions-learnmore-btn">{% yaml reference %}</button>
</div>
</section>
$('.solutions-items li').mouseenter(function() {
$("#show_data").text($(this).data("text"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container clearfix">
<div class="text-center">
<ul class="solutions-items">
<li data-text="bla_1">1</li>
<li data-text="bla_2">2</li>
<li data-text="bla_3">3</li>
<li data-text="bla_4">4</li>
<li data-text="bla_5">5</li>
<li data-text="bla_6">6</li>
<li data-text="bla_7">7</li>
</ul>
</div>
</section>
<section class="container clearfix">
<div class="text-center solutions-text-p">
<p id="show_data"></p>
<button class="solutions-learnmore-btn">{% yaml reference %}</button>
</div>
</section>

Categories