I have a JavaScript code for generating select box by getting value from ul li menu.
html menu:
<ul class="menu">
<li>
<a class="menu-item active parent" href="#">
<span class="menu">
<span class="menu-title">Inspiration</span>
<span class="menu-desc">wow! Amazing </span>
</span>
</a>
</li>
</ul>
I want to get only <span class="menu-title"> text. my current javascript code gets text from both span.
here is javascript:
document.getElements('ul.menu a.menu-item').each(function (el) {
optText = ' ' + el.get('text');
NOTE: I can get text from the first span changing this getElements('ul.menu a.menu-item') to this getElements('ul.menu a.menu-item span.menu-title') but then some of my code will not work. So please change the second line
optText = ' ' + el.get('text');
Are you using an external library? I do not understand your javascript.
To get the contents of "menu-title", you would use this:
document.getElementsByClassName("menu-title")[0].innerHTML
Got the answer, I simply changed this;
optText = ' ' + el.get('text');
to:
optText = ' ' + el.getElements('span.menu-title').get('text');
anyway! friends thanks for help
Related
I found a couple of other questions that were similar but I'm still not getting the needed result.
So I have a list:
<ul>
<li class="class1"></li>
<li class="class2"></li>
<li class="class3"></li>
<li class="class4"></li>
<li class="class5"></li>
</ul>
And then I have a set of dynamically-generated spans with IDs that match those classes.
<span id="class1"></span>
<span id="class2"></span>
<span id="class3"></span>
<span id="class4"></span>
<span id="class5"></span>
I need to append each of those spans to their matched list item. So .class1 to #class1. I figured there would be something easy like:
$(this).find('#' + this.className).appendTo(this);
Any suggestions?
$("li[class^='class']").on("click", function(){
$("#"+ this.className).appendTo(this);
});
jsBin demo
NOTE: your code will break as soon you add another class to your element:
<li class="class2 something"></li>
cause than you'll be erroneously searching for an ID element called #class2 something.
You'd better go using data-* attributes instead of class names.
$("[data-get]").on("click", function(){
$("#class"+ this.dataset.get).appendTo(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-get="1" class="class">1</li>
<li data-get="2" class="class">2</li>
<li data-get="3" class="class">3</li>
<li data-get="4" class="class">4</li>
<li data-get="5" class="class">5</li>
</ul>
<span id="class1">s1</span>
<span id="class2">s2</span>
<span id="class3">s3</span>
<span id="class4">s4</span>
<span id="class5">s5</span>
My solution, if I understood correctly:
$(function() {
$("span[id^='class']").each(function() {
var liObj = $("li[class='" + this.id + "']");
if (liObj.length == 1) {
$(this).appendTo(liObj);
}
});
}
Sorry for not posting all of my code. It didn't seem necessary. The answer is:
$( '#' + this.className ).appendTo('.' + this.className);
I knew it was something stupidly simple. Thanks for everyone who responded!
I have div which shows a tree in it. I want to get the value of the item selected in tree. But i am unable to get the value of it i am attaching a sample code.
Also this tree is added to the div dynamically.
<div id="listMergefile">
<ul class="jqueryFileTree">
<li class="file ext_pdf">
<a rel="/dssd/.pdf" class="FontClass" href="">
</a>
</li>
<li class="file ext_rep">
<a rel="/Expressions (2) 2014-26-08.repdocument" class="FontClass" href="">
</a>
</li>
</ul>
</div>
Here is one way to do it - http://jsfiddle.net/07tm0v5o/
$('li').mouseover(function(){
var relValue = $(this).find('a').attr('rel');
var relSpan = '<span class="relValue">' + relValue + '</span>';
$(this).append(relSpan);
});
$('li').mouseout(function(){
$(this).find('.relValue').remove();
});
The principal is the same regardless of how you'll be viewing the data.
I really need to nail this... I've been at it way too long now.
I think I need to get the innerText of each <a> element and put it into li_text variable.
The following is the 'supplied' code for this theme. The theme does not support submenus.
BUT I need this so I'm trying to make it work with submenus.
The following js script is partly 'building' the HTML.
var$ $main_menu = $('#main_menu');
$main_menu.find('li').each( function(){
var $this_li = $(this),
li_text = $this_li.find('a').html();
$this_li.find('a').html( '<span class="main_text">' + li_text + '</span>' + '<span class="menu_slide">' + li_text + '</span>' )
} );
It seems that it's this piece of code: li_text = $this_li.find('a').html(); from the above. that needs to tweaking....
I need that line to take the 'a' from it's closest parent above..... does this make sense?
together with this (from header.php)
$primaryNav = '';
if (function_exists('wp_nav_menu')) {
$primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => $menuID, 'echo' => false ) );}
The navigation HTML comes out like this:
<nav id="main_menu" style="opacity: 1; display: none;">
<ul id="menu-dk-fl370" class="clearfix">
<li id="menu-item-23" class="mcdu_left menu-item menu-item-type-post_type menu-item-object-page menu-item-23 even">
<li id="menu-item-48" class="mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-48 odd">
<li id="menu-item-27" class="nolink menu-item menu-item-type-custom menu-item-object-custom menu-item-27 even">
<li id="menu-item-55" class="has_sub mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-55 odd">
<a href="http://fl370.com/?page_id=53">
<span class="main_text">MEDIA</span>
<span class="menu_slide">MEDIA</span>
</a>
<ul id="sub-menu" class="sub-menu" style="display: none;">
***<li id="menu-item-67" class="mcdu_sub mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-67">
<a href="http://fl370.com/?page_id=60">
<span class="main_text">
<span class="main_text">MEDIA</span>
<span class="menu_slide">MEDIA</span>
</span>
<span class="menu_slide">
<span class="main_text">MEDIA</span>
<span class="menu_slide">MEDIA</span>
</span>
</a>
</li>***
<li id="menu-item-66" class="mcdu_sub mcdu_right menu-item menu-item-type-post_type menu-item-object-page menu-item-66">
</ul>
</li>
</ul>
</nav>
and so on...
**
THIS IS WHAT IM TRYING TO GET....
<span class="main_text">
<span class="main_text">BILLEDER</span>
<span class="menu_slide">BILLEDER</span>
</span>
<span class="menu_slide">
<span class="main_text">VIDEO</span>
<span class="menu_slide">VIDEO</span>
</span>
These 'names' is inserted via the li_text function in js.
But it seems it's inserting only the first li a name.
I need the script to take the page name from its 'own'/parent li a.
AND still apply the js script....
**
Hope someone can help....
Thanks
Personally, I hate using html() to populate snippets of HTML. I much rather prefer creating the elements, and appending them to the DOM. You end up with more control and understanding of what you're doing.
$("#main_menu li").each(
function(i, element)
{
$("<a />").attr("href", "some link here").appendTo(element);
$("<span />").addClass("class name here").text("some text here").appendTo(element);
// ...etc.
}
);
(If you post a little more about what code you're expecting in the end, I can give you more specifics about what I mean here...)
That aside, you're probably having extra issues because your HTML is malformed. You close your <a> tag twice, and you don't close your <li> tag. Also, you don't close a <span> tag, because one of your angle brackets is reversed (>/span>). jQuery is going to have a tough time dissecting the HTML elements if they're not done properly.
If your code structure stays as it is then you can grab that content by doing this. I am assuming you can't use the class names or IDs
$main_menu.find('> ul > ul').html();
or
$('#main_menu > ul > ul').html();
this will return everything inside of the ul but not the ul itself, so you need to create it and add it.
var container_ul = '<ul class="' + $main_menu.find('> ul > ul').attr("class") + '" id="' + $main_menu.find('> ul > ul').attr("id") + '">';
define container_ul outside of the loop, so the final thing would look something like this
var $main_menu = $('#main_menu');
var container_ul = '';
var final_content = '';
$main_menu.find('> ul > ul').each( function(){
container_ul = '<ul class="' + $(this).attr("class") + '" id="' + $(this).attr("id") + '">';
li_text = $(this).html();
final_content += container_ul + li_text + '</ul>';
});
so final_content will have the block of code you want, from here you can decide what to do with that block of code. Probably not the prettiest way to get the content but it should work
var myCode = {};
(function( global ) {
global.print = function(value){
alert("Values: " + value);
}
})(myCode);
$(document).ready(function(e) {
$('[id^=el]').bind("click", function(e) {
myCode.print("Value");
});
});
I have this list of anchor elements:
<li>
<a id="el1"><h3>header 1</h3><p>paragraph 1</p></a>
</li>
<li>
<a id="el2"><h3>header 2</h3><p>paragraph 2</p></a>
</li>
<li>
<a id="el3"><h3>header 3</h3><p>paragraph 3</p></a>
</li>
<li>
<a id="el4"><h3>header 4</h3><p>paragraph 4</p></a>
</li>
How can I bind multiple elements withou writing the binding one
If anchor el4 is clicked I want to print Values: header 4, paragraph 4
So how can I get in Jquery the header or paragraph of the respective anchor that is clicked on?
Looks like this would do it, you need to grab the text value of the h3 & paragraph tags inside of each anchor you're clicking.
$('[id^="el"]').bind("click", function(e) {
myCode.print($(this).find('h3').text() + ', ' + $(this).find('p').text());
});
try this
HTML
<li>
<a id="el1"><h3>header 1</h3><p>paragraph 1</p></a>
</li>
<li>
<a id="el2"><h3>header 2</h3><p>paragraph 2</p></a>
</li>
<li>
<a id="el3"><h3>header 3</h3><p>paragraph 3</p></a>
</li>
<li>
<a id="el4"><h3>header 4</h3><p>paragraph 4</p></a>
</li>
JS CODE
var myCode = {};
(function( global ) {
global.print = function(value){
alert("Values: " + value);
}
})(myCode);
$(document).ready(function(e) {
$('[id^=el]').bind("click", function(e) {
myCode.print($(this).find('h3').text()+ ' '+ $(this).find('p').text());
});
});
I am trying understand why the .wrap() function in my basic table of contents function isn't working. The function filters headers from a textarea and places them in an iframe, and the basic part works. But whereas my desired output is this:
<ul>
<li class="toc_h2">This is an h2</li>
<li class="toc_h3">This is an h3</li>
<li class="toc_h1">This is an h1</li>
</ul>
What I am actually getting is this:
<ul>
<h2>This is an h2</h2>
<h3>This is an h3</h3>
<h1>This is an h1</h1>
</ul>
How can I fix this/what am I misunderstanding? The code is here and at http://jsfiddle.net/supertrue/JgWxJ/
headers.each(function(i) {
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').appendTo(toc);
});
You can change this:
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').appendTo(toc);
to this:
$('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').html(this).appendTo(toc);
Here's your fiddle: http://jsfiddle.net/JgWxJ/7/
Alternatively, you could just add .parent() before appending:
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').parent().appendTo(toc);
...and here's the fiddle: http://jsfiddle.net/JgWxJ/10/