Search an element's content, excluding content of any children elements - javascript

I am having some difficulty figuring this one out. I am trying to search through my list of items and find a number (current day). Then add a css class to that list item.
This is working, but with a slight glitch: I want to be able to exclude all the text that exists inside the <p></p> tags. (Not quite sure how to do this). After some reading, I think I should be using the .not feature, but I think I might be doing it incorrectly.
Here is the jQuery I am currently using:
$("li:contains('" + thisDay + "')").not("p").addClass("current");
For your convenience, I have created this FIDDLE which displays my problem to you.
You will notice that every List Item with the number "19" in it is highlighted.
Could you tell me how to modify only the li that contains 19 and does not search the <p></p> tags for 19 as well?

You have two options. You could wrap the day in a span and target that instead, or you could filter out the text nodes and check them:
http://jsfiddle.net/EfKJ4/
$('.cal').filter(function () {
return $(this).contents()[0].textContent == thisDay;
}).addClass('current');
filter() lets you specify a function to run so you can have more control over the filtering (:contains() only does a wildcard search)
contents() returns all children, including text nodes, which is what your "day" numbers are.
[0] returns the first child, which in this case is the day number. You may want some error checking/handling here to make the solution more robust.
If you return true from the filter callback, the item will be included in the result. Return false, and it won't. So we want to return true when the text content is equal to the day you're looking for.

color property is inherited to the child elements, you can prevent this by simply add the following to your css:
li p{
color:initial;
}
(You can use a more specific selector.)
To downvoters :
This is working, but with a slight glitch: I want to be able to exclude all the text that exists inside the <p></p> tags
Could you tell me how to modify only the li that contains 19 and does not search the <p></p> tags for 19 as well?
OP doesn't want the <p> tags to be affected by the css in .current c;ass. my solution does just that. comments are welcome
Updated Fiddle

Related

Find the Element in which a Range Starts or Ends

I am trying to find the element in which a Selected Range Starts.
For example:
<p>Hello, <span class="editet">Genei180</span> is My Name</p>
The user now Selects:
"ei180 is My Name"
Therefore i want something like startElementofRange() which Returns "object HTMLSpanElement"
I than want that on keypress only the Part which sits in Span Edíted gets Deleted.
I know about the Node.startOffset and Node.startContainer.
But Node.startContainer would return in this case the whole p-Element as Text Element. But Node.startOffset is in this Case Relative to the Span Element so it would be 2. Also there can be occasions where more than one Span Edited Element can be selected. Current Approach is to loop true them all:
Sitenote:
This is for a Website which allows editing true the Javascript tag Contenteditable='true' and Displays Everything that changed in Green.
I also want to read in only the Changed Parts from the Spans if Submited.
So it can be Disscussed by the Users and Voteaccepted into an Articel.
Is this in general a Secure and sense Making approach?
I searched for weeks...
range.startContainer returns the Notetype but not as i thought of the p Element
instead it returns the type of the Span Element.
So you just need to use range.startContainer.parentNode to get The Element from it.
I feel stupid now.
I leaf this up in case some one has the Same Problem

Javascript find occurrence of given div with its content in DOM

I'd need to search the DOM, possibly inside a div with id="#box", to avoid searching the whole document, for the recurrence of given "<div><br></div>"
and delete all of em if any.
I'm trying with:
$('#box').html($('#box').html().replace(/<div><br><\/div>/g,''));
...but I have the impression it's deleting all divs whatsoever.
I also don't like the idea of using a regex for this.
You could use remove() instead along with a filter that checks for only a single child <br>
Something like
$('#box div').has('br').filter(function(){
return $(this).children().length === 1;
}).remove()

Using filter() to filter jquery based on parents

I see on jquery documentation that I can use .parent() to filter my matched elements based on the parent. But in the process, the final result I get is the set of parent elements, not the original set of elements. So I see that I can use filter to achieve what I want. But I found so few documentation about how to use filter to filter based on the parent.
For example, my html is:
<div id="social">
Facebook<br/>
Twitter<br/>
</div>
<div id="topsites">
Facebook<br/>
Stack Overflow<br/>
</div>
I want to get a set of elements, which consist of <a> tag that has facebook in it's href attribute, but within the social div parents.
I suspect the code will be something like this:
$('a[href*="facebook"]').filter( ... ).click(function() {
});
But I have absolutely no idea what to put on the filter. "parent#social" ?
Another way to put it is to use filter function.
$('a[href*="facebook"]').filter(function(index) {
return ...
}
.click(function() {
});
I also don't know what code to put on the ... . Is it something like this.parent.id == "social" ? If possible, I prefer the first form, but if the solution can only be achieved by using the second form (filter function) then it's okay. Thank you very much.
.parent() doesn't filter, it traverses. It takes a jQuery object, that lists an array (of size [0, n) ), and generates a new jQuery object with each element's parent.
Getting a jQuery object with the list you're looking for is much simpler though...
CSS Selectors, which jQuery is based upon (with various extensions) are heirarchical by nature. That means selecting specific children of some parent(s) is quite trivial. a CSS selector to pick the element you want is:
#social a[href*="facebook"]
and if you use this inside a jQuery constructor, you'll get you object:
$('#social a[href*="facebook"]')
I want to get a set of elements, which consist of <a> tag that has facebook in it's href attribute, but within the social div parents.
No need of filter here,
$('#social a[href*="facebook"]')
will do.

Find a word on a webpage and add a span to it

I've been trying to search for a word and add a span to it in order to give it some styling and functionality, and I've found a method of doing this, but it isn't very effective.
I have a content script that is searching for the word searching and then I replace the innerHTML with an added span to the keyword.
This is my JS file:
function getText(){
return document.body.innerText
}
if(getText().indexOf("searching") > -1) {
document.body.innerHTML = document.body.innerHTML.replace(new RegExp("searching", "g"),"<span class='spanDetected' id='spanDetected'>"+
'searching'+"</span>");
console.log("true");
}
And this is what the outcome is:
So it seems to work on some level, but then the problem arises that it also changes URLS and Textboxes, like so:
What is a better way of styling and adding functionality to a word?
Using Regex to parse [X]HTML is a terrible idea. Imagine the following HTML:
<div id="searching">A searching inspection</div>
Your program would replace both instances of the phrase 'searching', which is not what you want. You need to parse the page and replace the nodes intelligently. Perhaps ignore hyperlinks or use an overlay div for the hyperlink nodes
You have two options:
Traverse through all nodes recursively.
Use XPath to select the nodes that contain a specific text.
Something like this can get you all the nodes that contain the phrase 'searching'.
//text()[contains(., 'searching')]
Then you can loop through all the nodes and replace the one you want. Since you are developing a Chrome extension you can use $x to get the array of nodes that meet your XPath conditions:
$x("//text()[contains(., 'searching')]")
Read this answer to learn how you can loop through the items in the array.

Complex jquery selection that also involves custom xml tags

I want to write a select something like...
#window_4 > content > p:eq(0)
I think I have this correct, but I have a few selectors that are all similar but I can't test them all at once.
Am I right in saying this is selecting an element, who is the fist p tag child of a content tag that is a child of a tag with id 'window_4'
If I have gotten this wrong, can you give me some pointers. Would love to be able to simplify this code, I have more code selecting the tag I am after then actually doing stuff with them.
Looks good to me, although you can make it a bit more readable by substituting p:eq(0) for p:first.
Edit for comment:
jQuery always returns an array of elements, no matter whether 0, 1 or many elements were found. On these elements, yes, you can perform JS functions, such as innerHTML. You can access each element returned by jQuery just as if you would any other array:
$(".red")[0].innerHTML = "Glen Crawford";
More info: http://groups.google.com/group/jquery-ui/browse_thread/thread/34551a757f139ae1/20111f82c2596426

Categories

Resources