I need some help with my code, I have got a problem with fetch the text while ignore the class menu-list-count as it will display the value next to the text.
When I try this:
var mailfolder = $(this).not('[class="menu-list-count"]').text();
The return output will be:
test1 2
It should be:
test1
Here is the html:
<a id="iJ" class="menu-list-item mailfolder" href="#test1" target="_top" title="test1" tabindex="-1" draggable="false">
<div class="qj">
<i style="float: left;" class="folder_icon"></i>
</div>
<span style="margin-left: 7px;">test1 <span class="menu-list-count">2</span></span>
</a>
Here is the code:
$(document).on('click', '.mailfolder', function(e) {
e.preventDefault();
var mailfolder = $(this).not('[class="menu-list-count"]').text();
alert(mailfolder);
});
I have tried this:
var mailfolder = $(this).find('span:not(.menu-list-count)').text();
It doesn't work when I try it as i still getting test1 2 so I dont really know what to do,
Can you please show me an example how I can get the span text while ignoring the class menu-list-count?
Because you have a span in a span, in order to select the right one you need to change this line:
$(this).not('[class="menu-list-count"]')
to:
$(this).find('span:not([class="menu-list-count"])')
In order to get only the text belonging to the upper span you can combine .contents() with .filter():
$(this).find('span:not([class="menu-list-count"])').contents().filter(function() {
return this.nodeType === Node.TEXT_NODE; // get only text nodes
}).text()
The snippet:
$(document).on('click', '.mailfolder', function(e) {
e.preventDefault();
var mailfolder = $(this).find('span:not([class="menu-list-count"])').contents().filter(function() {
return this.nodeType === Node.TEXT_NODE;
}).text();
console.log(mailfolder);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="iJ" class="menu-list-item mailfolder" href="#test1" target="_top" title="test1" tabindex="-1" draggable="false">
<div class="qj">
<i style="float: left;" class="folder_icon"></i>
</div>
<span style="margin-left: 7px;">test1 <span class="menu-list-count">2</span></span>
</a>
I'm not sure with JQuery, but with plain JS you can use childNodes to filter everything that is not a textNode and then concatenate the result.
I've wrote a small JSFiddle to show how it works: https://jsfiddle.net/sandro_paganotti/4873muzp/6/
HTML
<div>
Hello
<b>Some Text</b>
</div>
JS:
const nodes = Array.from(document.querySelector('div').childNodes);
const text = nodes.map(t =>
t.nodeType == Node.TEXT_NODE
? t.textContent
: ''
);
console.log(text.join(''));
Related
I want a jquery code, please check the comment in the script.afetr click here i want code, to add inputText in li and rest the same
i don't know why posting a question is so creepy first time?
<body>
<div class="content">
<div class="main">
<input type="text" autofocus placeholder="Please write your task here....">
<button>Click To Add</button>
</div>
<div class="data">enter code here
<ul>
<li>Item aided shown here <a id="del-button" href="https://www.google.com">
<img src="del.png" alt="delete-button"> </a> </li>
</ul>
</div>
</ class="content">
<script>
$('document').ready(function () {
var cont = $('.content');
$('button').click(function () {
var inputText = $('input');
var newList = $('li').first().clone();
// now afetr click here i want code, to add inputText in li and rest the same
})
})
</script>
</body>
Try this:
$('button').click(function () {
var inputText = $('input').val();
var newList = $('<li></li>');
newList.append(inputText);
newList.append('<a id="del-button" href="https://www.google.com"><img src="del.png" alt="delete-button"> </a>');
$("ul").append(newList);
});
Also note that your HTML code is broken, before your <script> tag you have </ class="content"> instead of </div class="content">.
Working Fiddle.
I have a clickable span element that is supposed to call a javascript function that toggles a dropdown. This is an amalgum of two w3schools examples linked here.
onclick with span element
clickable dropdowns with w3.css
My code is below, the HTML and JS are inline in the same HTML document. The CSS can be ignored, it is just renamed w3.css stuff (w3- to mxa-).
HTML
<div class="mxa-dropdown-click">
<span onclick="menu_click("page-menu")">
<span class="mxa-xlarge">☰</span>
</span>
<div id="page-menu"
class="mxa-dropdown-content mxa-bar-block mxa-border"
>
<a href="/entity/show/42" class="mxa-bar-item">
Show Entity
</a>
<a href="/record/add/prompt/42" class="mxa-bar-item">
Add Record
</a>
</div>
</div>
JS
function menu_click(menu_id) {
window.alert('i got to here');
var menu = document.getElementById(menu_id);
if (menu.className.indexOf("mxa-show") == -1) {
menu.className += "mxa-show";
} else {
menu.className = menu.className.replace("mxa-show", "");
}
}
I have edited an example from the w3schools site that to me looks essentially identical to my code but which does work.
<!DOCTYPE html>
<html>
<body>
<span id="demo" onclick="myFunction('demo')">Click me to change my text color.</span>
<script>
function myFunction(arg) {
window.alert('i got to here');
document.getElementById(arg).style.color = "blue";
}
</script>
</body>
</html>
I never 'get to here' in my code. What could I be doing wrong?
You are forming the onclick attribute with invalid syntax, change the inner double quotes to single quotes.
Change
<span onclick="menu_click("page-menu")">
To
<span onclick="menu_click('page-menu')">
OR: With double quotes inside the single quotes
<span onclick='menu_click("page-menu")'>
function menu_click(menu_id) {
window.alert('i got to here');
var menu = document.getElementById(menu_id);
if (menu.className.indexOf("mxa-show") == -1) {
menu.className += "mxa-show";
} else {
menu.className = menu.className.replace("mxa-show", "");
}
}
<div class="mxa-dropdown-click">
<span onclick="menu_click('page-menu')">
<span class="mxa-xlarge">☰</span>
</span>
<div id="page-menu"
class="mxa-dropdown-content mxa-bar-block mxa-border">
<a href="/entity/show/42" class="mxa-bar-item">
Show Entity
</a>
<a href="/record/add/prompt/42" class="mxa-bar-item">
Add Record
</a>
</div>
</div>
All are same except onclick quote .check your quotes on onclick call
onclick="menu_click('page-menu')"
function menu_click(menu_id) {
window.alert('i got to here');
var menu = document.getElementById(menu_id);
if (menu.className.indexOf("mxa-show") == -1) {
menu.className += "mxa-show";
} else {
menu.className = menu.className.replace("mxa-show", "");
}
}
<div class="mxa-dropdown-click">
<span onclick="menu_click('page-menu')">
<span class="mxa-xlarge">☰</span>
</span>
<div id="page-menu" class="mxa-dropdown-content mxa-bar-block mxa-border">
<a href="/entity/show/42" class="mxa-bar-item">
Show Entity
</a>
<a href="/record/add/prompt/42" class="mxa-bar-item">
Add Record
</a>
</div>
</div>
I noticed that you are calling function error. Just replace these line of code.
Hope it will help you.
<span onclick="menu_click('page-menu')">
<span class="mxa-xlarge">☰</span>
</span>
I have this multiple elements with the same class.
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
1
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
2
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
3
</div>
</div>
If I click the the <a> tag on the first div, it should alert the value of .product-list-col value which is 1
if I click the second div of anchor tag, it should alert 2
here's the code for it
$(".dup-class").on('click', function() {
cont = $(this + " .product-list-col").text();
alert(cont);
});
Any solution for this stuff?
Here's the jsfiddle of it: http://jsfiddle.net/Vigiliance/PLeDs/3/
You could use siblings(), the reason why your code doesn't work is because it's selecting all .product-list-col
$(".dup-class").on('click', function () {
cont = $(this).siblings('.product-list-col').text();
alert(cont);
});
or use .next()
$(".dup-class").on('click', function () {
cont = $(this).next('.product-list-col').text();
alert(cont);
});
do this:
$(".dup-class").on('click', function() {
cont = $(this).next().text(); // this is the line where change done
alert(cont);
});
http://jsfiddle.net/PLeDs/2/
I need to loop through a list of divs. If a div in that list has the class name of "active", than I need to save the contents of the <p></p> tag of the specific div to a variable. I then need to place the contents of that variable in a the value of a hidden input element on a form. For example, here is some example HTML:
<div class="names">
<div class="one active">
<p>A</p>
</div>
<div class="two active">
<p>B</p>
</div>
<div class="three">
<p>C</p>
</div>
<div class="four active">
<p>D</p>
</div>
<div class="five">
<p>E</p>
</div>
<div class="six active">
<p>F</p>
</div>
</div>
<form action="form.php" method="POST">
<input type="hidden" name="list" id="list" value="">
</form>
Since four of the divs contain the "active" class, I need to save the content that is in each paragraph tag to a variable to be inserted into the value of the hidden field. In this example, the value of the field would be A, B, D, F.
I thought about doing something like this:
var userSelection = function() {
$('.names div').each(function () {
if($(this).hasClass('active')) {
return $(this).text();
}
});
};
$('#list').val(userSelection);
First off, that code doesn't work and I am also not even sure if that's the best way to go about solving my problem. Second, if anyone has a better idea of how to accomplish what I need, I would love to hear it.
I would use map() to get an array of the text:
var textArr = $('.names div.active').map(function() {
return $(this).text();
}).get();
From there, you could use join() to get a string you could write to the DOM:
var textString = textArr.join(', ');
Full, compressed code:
var userSelection = function() {
return $('.names div.active').map(function() {
return $(this).text();
}).get().join(', ');
};
$('#list').val(userSelection());
Alternative to Jason P's answer is to modify what you've got to return an array of the results, as you're calling a function into a variable that has multiple results:
var userSelection = function() {
var output = [];
$('.names div').each(function () {
if($(this).hasClass('active')) {
output.push( $(this).text().trim() );
}
});
return output;
};
See JSFiddle.
Working fiddle: http://jsbin.com/uQEJIkU/3/edit
$(document).ready(function() {
values = []
$("div.active > p").each( function() {
values.push($(this).text())
})
})
I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle
if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;
This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here
Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.
Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}