I need to change the order of the 'span' objects before the text in the elements 'a' using Jquery.
someone can help me?
<a href="#" class="has-submenu">
Some text content
<span class="dropdown-menu-toggle"></span>
<span class="sub-arrow"> > </span>
</a>
must to be :
<a href="#" class="has-submenu">
<span class="dropdown-menu-toggle"></span>
<span class="sub-arrow"> > </span>
Some text content <-(This text must to be in the end)
</a>
Use the .prependTo() method to move elements to the beginning of a container element.
$("#move").click(function() {
$(".has-submenu span").prependTo($(".has-submenu"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="has-submenu">
Some text content
<span class="dropdown-menu-toggle">toggle</span>
<span class="sub-arrow"> > </span>
</a>
<br>
<button id="move">Move spans</button>
Related
As suggested in the title I am trying to implement an expandable list but on the navigation drawer. I am trying to do this in plain HTML and CSS. Here's what it should look like Expandable List
I proceeded with attempting to create a page with a navigation drawer and in that have a list of pages. Please find the related code
<div class="mdc-drawer__content">
<ul class="mdc-list">
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text"> Home </span>
<span class="mdc-list-item__secondary-text"
>Dashboard
</span>
<span class="mdc-list-item__secondary-text">Submenu1 </span>
</span>
</a>
<a class="mdc-list-item" href="/admin/account.html">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text mdc-list-item__primary-text"
>Submenu2</span
>
</a>
</ul>
</div>
https://jsfiddle.net/26pq48Lv/11/
I wish to see The links Submenu1 and Submenu2 in expanded list of Item1 which could collapse.
How to filter html elements using Jquery function ?
Below is the html structure. I want to get the value of 2nd span which is inside a tag warpped in a li item ?
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span> ----- **How to filter and find this element value based on the message span value ?
</a>
</li>
```````````````
I need a condition like in li if span's value = "Item3", get the below span.icon's value
Couple of ways to do it. One way is with has and contains.
$("li:has(span.icon:contains('Icon_3'))").addClass("selected")
.selected {
background-color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
And now based on the information you provided.....
var text = $("span.message:contains(Item3) + span.icon").text()
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
or how most people would do it.
var messageElem = $("span.message").filter(function(){ return this.textContent === "Item3" });
var text = messageElem.next("span.icon").text();
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
I'd prefer this, because :contains() seeks the matching string and not exact string. That is why, using filter is better :)
var choice = $("li span.message").filter(function(){
return $(this).text().trim() === "Item3";
}).next('span.icon');
//If there is only one item with text "Item3"
console.log(choice.text());
//If there are multiple items
choice.each(function(){
console.log($(this).text());
});
.selected {
background-color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
Code:
$('li span.icon')
It should work
I'm using a css class to allow me to put an 'add' link and an 'edit' link side-by-side in the same item on a Bootstrap dropdown list.
<li class="multilink"><a data-toggle="modal" data-target="#.."><span class="glyphicon glyphicon-plus "></span></a></span> Collections</li>
Edit: the whole menu item
<li class="dropdown">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right" >
<li>
<a data-toggle="modal" data-target="#SectionRosterModal">Roster
</a>
</li>
<!-- Announcments -->
<li class="multilink">
<a data-toggle="modal" data-target="#AnnouncementAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='ann' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Announcements
</a>
</li>
{# <li>Edit Announcements</li> #}
<!-- Courses -->
<li class="multilink">
<a data-toggle="modal" data-target="#CourseAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href={% url 'gbook:doedit' to_edit='cou' pk=this_course.pk Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Course
</a>
</li>
<!-- Sections -->
<li class="multilink">
<a data-toggle="modal" data-target="#SectionAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='sec' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Sections
</a>
</li>
<!-- Scollections -->
<li class="multilink">
<a data-toggle="modal" data-target="#ScollectionAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='sco' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Scollections
</a>
</li>
</ul>
</li>
CSS:
.dropdown-menu > li > a:hover {
background-image: none;
}
.open> ul>li.multilink{
display: inline-flex !important;
}
The item looks like this:
What I want is for the two icons to be fairly snug on the LHS, followed by the text (linked to the edit link). Additionally, is there any way to disable the active link color change? I have taken off the background-image, but there's still an associated color change.
So I put the code you provided into a JSFiddle. With just Bootstrap CSS the two glypicons are right next to each other. Can you provide more of you html and css because something else is causing the styling you do not want.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
<ul>
<li class="multilink">
<a data-toggle="modal" data-target="#..">
<span class="glyphicon glyphicon-plus "></span>
</a>
<a href ="">
<span class="glyphicon glyphicon-edit"></span> Collections
</a>
</li>
</ul>
I will edit my answer when you provide more html and css
** EDIT **
In bootstrap's css file they have this:
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
That css is causing there to be 20px of padding between your two links. Adjust the padding to get the appearance you are looking for.
.dropdown-menu>li>a {
padding: 3px 5px;
}
When I click in a link my page scrolls up, I know if I handle this inside the controller I can put an event.preventDefault() there, but I don't want this on controller.
Is there a way to handle this in my view?
<li ng-hide="showMore">
<a href="#" ng-click="showMore=!showMore">
<span class="fa fa-plus-circle"></span> <br>
Mais
</a>
</li>
<li ng-class="{'active':showMore}" ng-show="showMore">
<a href="#" ng-click="showMore=!showMore">
<span class="fa fa-minus-circle"></span> <br>
Menos
</a>
</li>
I would remove the <a> tag altogether and replace it with a span.
<span class="link" data-ng-click="showMore = !showMore">
<span class="fa fa-plus-circle"></span> <br>
Mais
</span>
</span>
CSS
span.link {
cursor:pointer;
color:blue;
}
span.link:hover {
text-decoration:underline;
cursor:pointer;
}
The <a> tag does not to have the href attribute. Removing it should help.
Also, semantically, this is not a link, but a button, so it would be more correct to use <input type="button"> or <button> tag instead of <a>.
You can always use "#!"
Like this:
<li ng-hide="showMore">
<a href="#!" ng-click="showMore=!showMore">
<span class="fa fa-plus-circle"></span> <br>
Mais
</a>
</li>
<li ng-class="{'active':showMore}" ng-show="showMore">
<a href="#!" ng-click="showMore=!showMore">
<span class="fa fa-minus-circle"></span> <br>
Menos
</a>
</li>
I have a seemingly simple alignment issue I can't seem to fix. I have a basic menu inside a div. I want to add content underneath the menu, so I created another div with a top-margin of 10px. For some reason, it is not recognizing the content as separate and keeps inserting the content in line with the menu. The information span class is being placed on the same level as the menu. Please let me know if you see a problem with the way these divisions are set up!
The CSS code just has a padding of 10px on the top for the information class.
HTML CODE:
<body>
<div class="content">
<h1 class="title">HOME PAGE</h1>
<img src="pic.jpg" alt="Picture" style="padding:0px 0px 0px 45px"/>
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
EXAMPLE
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
<div class="sdt_box">
EXAMPLE
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
A
</div>
</li>
</ul>
</div>
<div>
<span class="information">
<p>
Some content here
</p>
</span>
</div>
With out seeing your CSS it sounds like a float issue. You need to clear floated elements. Assuming you did them correctly they're most likely on the li tags. You can use overflow:hidden on your parent ul:
ul#sdt_menu{
overflow: hidden;
}
or you can use a cleafix method
ul#sdt_menu:after{
content: '';
display: block;
clear: both;
}
If neither of these work please post your CSS for further help