I have a sections as shown below
<div class="mbox">
People: John, Tim, Jake
Number : 5
<div>.
<div class="mbox">
People: John, Jake
Number : 6
<div>
Now, How is it possible to hide the above when i give a user input of some sort to display all divs that have Number > 6. And also, another option to show sections that have John,Jake.
Can you suggest me how this can be done?
Thanks,
John
Firstly, you don't even know your HTML code is invalid?
Secondly, looks like you can't modify your HTML code?
So the only solution is to select all the .mboxs and use RegExp to extract the number and filter the result like this:
$('.mbox').filter(function(){
return parseInt(RegExp("Number\\s*:\\s*(\\d+)").exec($(this).text())[1]) <= 6;
}).css('display', 'none');
Demo.
You can try to use data attribute of html to define the variable of the div.
ex: <div class="mbox" data-number="5" data-name="..." > ... </div>
Than i jquery you can select the attribute $(".mbox").attr("data-number") and make a control that check the number.
Same for the name but there depends is they are dynamics or statics.
If they are dynamics it's a bit more complicated.
Related
I've the following question, let say we have a div like this:
These are dynamically formatted divs, with the classes 'row', 'element' and 'isotope-item' are always present. Everything in between can vary per div.
What I want is to the following:
As you see the commmas are no longer there and seperate classes between the commas are now one class.
Anyone any idea?
I already have the following to remove the commas:
$('div.element').each(function () {
var _sCurrClasses = jQuery(this).attr('class');
jQuery(this).attr('class', _sCurrClasses.replace(/,/g, ' '));
});
I would advise doing this backend,but in JavaScript you could:
This will not account for the space in the words though.
You would need to pass then trough separately one by one and replace.
or store them in a data-attribute and format when you need them.
<string>
var classesFormat = classes.replace(/,/g, '');
var classesList = classesFormat.split(" ");
for(String c : classesList)
{
$("#id").addClass(c);
}
</string>
So you could create a data-attribute for each one instead.
Go through each one, format and the add to class.
<div data-id="Microsoft Office," class="test test test">
With the script
$(this).attr("data-id") // will return the string "Microsoft Office,"
or .data() (if you use newer jQuery >= 1.4.3)
$(this).data("id") // will return the Microsoft Office,
And then do your replace after that and addClass.
I don't think classes work like you think they do
the first PICTURE you posted would result in that div having the follwing classes
row
element
Microsoft
Office,
My
SQL,
Page
Rank
isotope-item
Note the , is PART of the class
You want, according to the second PICTURE
row
element
MicrosoftOffice
MySQL
Page
Rank
isotope-item
Removing , is just as you posted ... the problem is, how do you determine which spaces to remove, and which to keep?
(I posted this as an ANSWER, but I KNOW IT IS NOT AN ANSWER)
I have the following code on my ecommerce website.
I would like to search to check whether it contains "0.00"
If it does contain "0.00" I would like to hide the parent div containing the price
This is because we want the product to appear online but even though it cannot be purchased, the price is still displayed, so we don't want people to be confused if they see the price as £0.00.
<div class="ct_pd_item_price ct_pd_item_value">
<span itemprop="price">
<span class="ct_currencyCode">GBP</span>
<span class="ct_currencySymbol">£</span>0.00</span>
</div>
Is this possible using some form of javascript?
If you can't change your HTML, it's a little tedious because the text must be cleand from the currencyCode and currencySymbol. A way to do this is to clone the div and then take the text :
$(".ct_pd_item_price.ct_pd_item_value").filter(function(){
return $(this).clone().find('.ct_currencyCode, .ct_currencySymbol').remove().end().text().trim()=="0.00"
}).hide()
Demonstration
Of course a cleaner HTML, maybe with the value in a data attribute, would be easier to deal with.
Another way with a regular expression
$('[itemprop="price"]').each(
function() {
var elem = $(this);
if (elem.text().match(/[^\d]0\.00/)) {
elem.closest(".ct_pd_item_price.ct_pd_item_value").hide();
}
}
);
Pulls out the text and it will be £0.00 so match that the price is not [anynumber]0.00
I am working with android webview and for achieving some functionality i need to integrate javascript. I am new to javascript to please tell me how to get the paragraphs id(id of each paragraph which are under selection). In more details:
Like i am having data-
<p id="01">hhh dhghdg
<span id="1.1">dada</span>
<span id="1.2">dgsdd</span>
</p>
<p id="02">dsdgs dhgd hdhd
<span id="2.1">dada</span>
<span id="2.2">dgsdd</span>
</p>
So you select some data i.e "hhh dhghdg dsdgs" so this data belongs to multiple paragraph p1 and p2 so i want to get the id of both the paragraph using javascript.
Please tell me how to get this.
PPK has a very detailed post:
http://www.quirksmode.org/dom/range_intro.html
Which describes range objects. I've not done this before but by the looks of things you'll need to use:
window.getSelection()
Which should return a selection object from which you can get a range object which will contain all the selected elements (as described in the link above)
From scanning the docs on MDN:
https://developer.mozilla.org/en-US/docs/DOM/window.getSelection
You'll get an HTML string back from which you could attempt to get all the ids from, using a regular expression, something like this:
var underSelection = window.getSelection().getRangeAt(0);
var idsRegEx = /#\s(id|class)="[^"]+"/;
var idMatches = idsRegEx.match(underSelection);
//then clean and do something with the ids
I haven't tested any of this but I'm hoping it gets you started.
EDIT: additional info
If you're using jQuery you might be able to load the selection into a jQuery object and get all the ids out by doing :
var IDs = [];
$(underSelection).find("p").each(function(){ IDs.push(this.id); });
You have to use either
document.documentElement.id
or
document.getElementsByTagName('HTML')[0].id
I want to display prices followed by a $ sign in a different color in the heading. I don't want to display all numbers in different color - just where $ sign appears and the digits after that. There could be up to two numbers after the decimal point in some cases e.g. where price is $12.50
I have access to both HTML and CSS on the server.
Please see below code that is used to display heading. Please let me know how I change this code.
{$title_short}
Thanks for your help in advance in solving this.
Example:
If you have access to the HTML, you can simply wrap all the prices in a span tag and assign some class to them. Then just use CSS to set the color:
<span class="price">$12.34</span>
Why not just add a span like:
css:
span.money{
color: red;
}
html:
$<span class="money">12.50</span>
If I understand correctly, this should do the trick if you use jQuery
$('element:contains("$")').css('color', 'whatever color you'd like');
Example
$('table th:contains("$")').css('color', 'yellow');
Assuming , you the values are in a tag (or any selectable node) , you can replace them back with a regex . Something like
$('p:contains("$")').html(function(i,html){
return html.replace(/(\$\d+(\.\d+)?)/g,function($1){
return '<em class="money">'+$1+'</em>';
});
});
Here's a quick demo .
http://jsfiddle.net/ngcBg/
I am grabbing a div from the document with :
var myTotal = window.document.getElementById('status').innerHTML;
which returns a big mess of HTML
<div id="foo">
<a href="bar" onclick='_gaq.push(["_trackEvent", "The", "Total",])'>
<img src="foo.gif" alt="foo" height="22px;/" width="15px;"></a>
</div>
<a href="bar" onclick='_gaq.push(["_trackEvent", "The", "Total",])'>
MY TOTAL:
<span style="font-size: 12px; color: #F3A428; font-weight:normal;"> 8 item(s) </span>
</a>
Can one of you expression wizards please show me how I can grab just the number in the span, in this example an 8 ?
Can you give the span an id and reference it directly?
If not, then this regex should return the number in the span: /<span[^>]+>\s*(\d+)/
I'm assuming that there is only ever one span in the div.
This should help you
var myTotal = window.document.getElementById('status').getElementsByTagName('span')[0].innerHTML
myTotal = myTotal.replace(/(^\d+)(.+$)/i,'$1');
In jQuery, without even getting the inner HTML it would be this:
var items = $("#status span").first().text();
items = parseInt(items, 10);
alert(items); // 8
If you control the HTML, it would be advisable to put a unique ID on the span containing the result and then it's easier to retrieve and not dependent upon the structure around it or better yet, have it output into the page as a JS variable that you can just directly read and not have to deal with the presentation.
Seen in a jsFiddle here: http://jsfiddle.net/jfriend00/UqcxS/
You can also try, just using innerText
window.document.getElementById('status').innerText.replace(/[^0-9]/gi, '');
http://jsfiddle.net/X9ffE/
Use jQuery instead, it has a lot of functions that can help you find specific elements in your page. Also, you may want to add identification for your elements like class and id.