Hi is there anyway to search text in dom, as we do for SQL query LIKE?
i mean, i have.
<ul>
<li>ab</li>
<li>abrecot</li>
<li>abus</li>
<li>aby</li>
<li>abrea</li>
</ul>
i would like to search for "abre" and so return in text ASC order:
<li>abrea</li>
<li>abrecot</li>
is this possible?
definitely the query would looks like doing:
SELECT <li> FROM <ul> WHERE text LIKE 'abre%' ORDER BY text ASC; :))
As you are looking for elements whose text starts with a specified string, you can use the filter method:
var x = $("ul li").filter(function() {
return $(this).text().substr(0, 4) === "abre";
});
This will only return elements which have the string "abre" at the start. The other answers using the contains method will return elements with the string found anywhere within them, which does not match your pseudo-SQL query.
Here's a working example of the above.
I think you would want the jQuery 'contains' function, have a look at the docs here:
http://api.jquery.com/contains-selector/
Your example would probably look like this:
$("li:contains('abre')")
EDIT to include the comments here, if you are looking for "starts with", you can do this on an element using the following syntax:
$('li[anAttribute^="abre"]')
But this assumes you have an attribute to query which i don't think you do, in which case the filters answer will likely suit your needs best.
The :contains() selector is probably what you're looking for:
http://api.jquery.com/contains-selector/
QUOTE:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>
</body>
</html>
Related
I'm trying to remove all style attributes from a string (and not an object), in JavaScript or jQuery.
Example
var html = "<p style="color:red">my text</p>";
And I want to obtain this:
<p>my text</p>
Is it possible to do it without calling the functions that we can call on objects (as removeAttr)?
Thanks
If you are not looking to use JavaScript or jQuery objects, have you tried using regular expressions?
This answer to a previous question shows a php version that can be adapted to JavaScript using the replace function.
See if this helps.
$("button").click(function() {
$("p").removeAttr("style");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color:red">my text</p>
<button>Remove the style attribute from all p elements</button>
I want to create a list of news on my webpage. When mouse click on the content, there will be a url available. For example apple news
Here are my sample codes, my problem is: when I try to add a variable's value into the href, like href="www.search.com?keyword="+var.keyword, it will display apple news
Actually there are a 50 objects in the variable model, so it will having 50 model.link and model.keywords, please help me to change the sample code which works on w3cshools.com "try it youself". I tried 10 times by really don't know the how to fix it, thanks!
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<!-- should end this tag-->
var model=[{"link":"http://www.google.com?keyword=","keyword":"apple" "content":"This is a news"}]
<!-- miss a ";" at the end of line -->
</script>
<script>
$(document).ready(function(){
$("p").html("Click <a href=model.link+model.keyword>this link</a>");
<!--Finally this works: $("p").html("Click <a href='"+model[0].link+model[0].keyword+"'>this link</a>");-->
});
</script>
</head>
<body>
<p>A content</p>
</body>
</html>
Quote properly:
$("p").html("Click this link");
you missed comma in your model variable::
var model=[
{
"link":"http://www.google.com?keyword=",
"keyword":"apple",
"content":"This is a news"
}
];
And since its array of object , you need to access it like model[0].link to get first object from model array, like:
$(document).ready(function(){
$("p").html("Click <a href='"+model[0].link+model[0].keyword+"'>this link</a>");
});
Put the link correctly
$("p").html("Click <a href='"+model.link+model.keyword+"'>this link</a>");
This is what you need:
var model=[ { link:'http://www.google.com?keyword=', keyword: 'apple', content: 'This is a news'} ];
$.each( model, function( key, value ) {
$('p').append('Click this link');
});
You need to loop through the array of objects and get values. You can use $.each to make this easy since you are using jQuery though you can just as easily do this with vanilla Javascript, I would also get in to the practice of wrapping strings in single quotes in Javascript, that way you can add double quotes in a nice readable syntax to HTML strings you will be adding to the DOM.
Note that I did not use quotes for object keywords too.
See fiddle:
http://jsfiddle.net/r8MQ9/1/
I have a situation with sample code as follows:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>
<h1>The header</h1>
<div>
matter ia always matter matter ia <strong>bold matter</strong> matter matter <em>italics matter</em>matter ia <em><strong>bold italics matter</strong></em>lways matter
</div>
</p>
</body>
</html>
I am just trying to retrieve the specific tags like body->p->div->em->strong when I click on "bold italics matter" using jQuery. Is there any standard method to retrieve as per the click event?
If you wan to get the tag name of the element which is clicked, then you can use:
$('*').click(function(e) {
e.stopPropagation();
console.log($(this).prop('tagName'));
});
Fiddle Demo
I'm not completely sure about what you are trying to accomplish. If you are trying to retrieve the tag itself that the text is contained in, i would recommend that you put a <span> tag in around the the text in question and do an onclick="function()" or simply put the onclick right on the <strong> tag.
As far the the JQuery/Javascript goes, if you want to retrieve the content, it looks like
var foo = document.getElementById.innerHTMl("id");
However, this requires you to have an id in your tags which is probably the best, if not
'standard' method of retrieving the content that is within the tag.
After reading your comments, i am editing this post:
The best way to get the parent elements is to use the JQUery .parent() function. I'd imagine that you would just recursively state something like this:
var foo = $("nameofelement").parent();
I hope this is more of what your looking for.
Thanks for contributing everybody. At last I made it myself with the following code.
$(document.body).click(function(e){
var Tags=[], Target=e.target, stat_msg="";
Tags.push(Target.tagName);
while($(Target).parent().get(0).tagName!=="BODY")
{
Tags.push($(Target).parent().get(0).tagName);
Target=$(Target).parent();
}
Tags.push("BODY");
for(i=Tags.length;i>0;i--)
stat_msg=stat_msg+Tags[i-1]+" ";
alert(stat_msg);
});
<head>
<script>
function copyText(str1, str2){
document.getElementById(str2).innerHTML = document.getElementById(str1).innerHTML
}
</script>
</head>
<body id="main">
<H2 id="text1">Hello World</H2>
<H2 id="text2" >No change so far</H2>
<button onclick="copyText(document.main.text1.id, document.main.text2.id)">Change</button>
</body>
I want to able pass element ids as parameters to javascript functions. Is there a way to this?
The decent cross-browser way to get elements by ID is the document.getElementById() function you already know about. So rather than this:
document.main
... you should do this:
document.getElementById("main")
... etc. But of course you are doing something redundant: get an element by ID in order to obtain its ID. It's like making a phone call to ask the receiver for its phone number. All you need is:
copyText('text1', 'text2')
IDs as just strings.
I know this is simple, but I can't wrap my head around it. Currently the following code returns "[object HTMLDivElement],[object HTMLDivElement]" I'd like it to return "div1,div2". Any thoughts? Thanks guys.
<HTML>
<HEAD>
<script type="text/javascript" src="path_to/prototype.js"></script>
<script>
function linkClick ()
{
alert($$('div.basic'));
}
</script>
</HEAD>
<BODY>
<div id="div1" class="basic" onclick="linkClick();"></div>
<div id="div2" class="basic" onclick="linkClick();"></div>
</BODY>
</HTML>
I had the same problem, there is a simple solution :
If varElement is your object containing a [HTMLDivElement] (or other DOM object) simply add '.id'
e.g.
varElement.id
There's an optimization in prototype specifically for this:
$$('div.basic').pluck('id')
If I read your question right, you want a list of div IDs, rather than a string of ids separated by a comma.
var ids = $$('div.basic').collect(function(el) { return el.id; }); //array of ids
alert(ids.join(','));
collect is another name for map, which is allows you to transform the elements one type of collection into another type by applying a "selector" function to each.
alert($$('div.basic').invoke('identify').join(',');
The invoke will call a function by name. The identify function will provide the id. When called on an array it will return an array of their ids. Join turns them into a string with commas in between.