How to find link in div where name begins with X - javascript

i'm trying to find a link where the name of the div begins with a certain text.
not OK when searching by "name begins with":
link = $("div[title^= 'label']").find('a').attr('href');
var contentOfFile = loadFile(link);
OK when searching by class:
link = $(".o_mail_thread").find('a').attr('href');
var contentOfFile = loadFile(link);
i'd like to get the content of a file, it works with an unique file as shown in "OK", but when there are multiple files, i can't select the right one based on this search "NOK".

I suppose you have some divs with class o_mail_thread and those divs have anchor element. divs dont have name. you have to select them by class
$('.o_mail_thread').each(() => {
var link = $(this).find('a').attr('href');
//do what you want with your links.
});
I didn't understand your multiple file reference. You have to share your full html code.

Related

Can't add button under div

I have a Chrome extension that inserts a button onto HTML pages. I got it to add the button under one div. Now I'm trying to get it to add it under an image in that div, and it won't work — no errors, the button just doesn't appear. When I do console.log(image_div); it prints out the image object.
Version that works:
var uCW = jNode.closest("[role='article']");
uCW.append(button);
Version that doesn't work:
var image_div = $(uCW).find('[src^="https://external"]');
image_div.append(button);
uCW is the variable name I gave to the parent div, and image_div is the variable name I gave to the child within uCW that contains the image.
The problem that you are having is you are appending to a div successfully, but appending to an image is failing. The reason is you can't append to an image, you have to use 'after' since an image isn't an object that can content appended to the innerHTML of it.
So change this:
var image_div = $(uCW).find('[src^="https://external"]');
image_div.append(button);
to:
var image_div = $(uCW).find('[src^="https://external"]');
image_div.after(button);

Is there a way with either vanilla Javascript or Jquery to select a span class before in the DOM?

I am designing a Squarespace site, so I do not have direct access to the HTML. I would like to add some CSS to the site's drop down menu system. And the way the menu system is setup, it does give not assign ID names, only class names. So, it has one DIV and within that one DIV, it has several SPAN classes. The problem is that all the folder SPANS are all named the same and all the HREF classes are all named the same. What I would like to happen for example, is that if the user clicks on a either "About Us," "Memstaff Team, or "Careers," I would like to add (not replace) a class named "currentFolder" to the "/about" HREF which is the SPAN right before it (which has a class name of "Header-nav-folder-title"). But I do not want to effect the other HREF that comes after, which also has the same exact CLASS name of "Header-nav-folder-title." I would also like to remove the class "currentFolder" when a user clicks on any of the other links so I can repeat the process. I am aware of Jquery's .closest() and .find() but do not know enough on how to use them properly.
<div class="Header-nav-inner">
<span class="Header-nav-item Header-nav-item--folder">
About
<span class="Header-nav-folder">
About Us
MEMStaff Team
Careers
</span>
</span><span class="Header-nav-item Header-nav-item--folder">
Job Seekers
<span class="Header-nav-folder">
Submit a Resume
MEMStaff Jobs
Referral Bonus</span>
</span>For Employers
Contact
</div>
$('a.Header-nav-folder-item').click(function() {
//Remove active class from all title elements
$('.Header-nav-folder-title').removeClass('active');
// Add class to correct title element
$(this).parent().siblings('.Header-nav-folder-title').eq(0).addClass('active');
});
// Remove active class when clicking on bottom two links
$('a.Header-nav-item').click(function() {
//Remove active class from all title elements
$('.Header-nav-folder-title').removeClass('active');
});
Here is some code that I think may solve your problem. You should set it to run whenever the page navigates (document load probably).
Note that this will only work if the page path exactly matches the link href.
// Get all of the folders
const folders = document.querySelectorAll('span.Header-nav-item--folder');
// Loop through the folders
for (const folder of folders) {
// Variable for if one of the folder contents is the current page
let childIsCurrent = false;
// Get all of the links in the dropdown
const links = folder.querySelectorAll('a.Header-nav-folder-item');
// Loop through the links
for (const link of links) {
// Compare the link href with our current path
if (link.href === location.pathname)
childIsCurrent = true;
}
// Find the folder title
const title = folder.querySelector('a.Header-nav-folder-title');
// Add or remove the class
if (childIsCurrent)
title.classList.add('currentFolder');
else
title.classList.remove('currentFolder');
}

Get Anchor Tag from textarea using jquery

I have a textarea which contain list of link in the form of anchor tag and their inside content
for e.g.
Example 1
Example 2
Example 3
Example 4
Above information is given inside a textarea. I want after click submit i want to retrieve all anchor tag's href section of particular class like tex1.
for e.g. I want output like
http://example1.com/azaz http://example1.com/aza
how can i achieve this Using Jquery/javascript
try this
var text = $("textarea").val();
var res = $(text).map(function() {
return $(this).attr("href");
});
console.log(res);
FIDDLE

When A + B are selected from two select lists, Load results page at #Anchor?

I have an on-line store that has a product page. The page has two select boxes to choose from and will filter results based on those two options.
If I choose criteria A + B from the select boxes, the page filters through the products to show products with that criteria. However when this event happens, the page scrolls to the top of the page. This is especially annoying on mobile as the select boxes are not at the top of the page.
How can I add either a javascript event to scroll to a specific div (for example #ProductList) when the selection is made.
Or maybe an onload event that adds the #ProductList to the end of the url.
I have found examples to scroll to a div id based on the id selected. But I need something simpler that always scrolls to the same div #ProductList when the select boxes are clicked.
This Example works for id selected but i need a general one that scrolls to one specific div id
var select = document.getElementById('test');
select.onchange = function(){
var id = this.getElementsByTagName('option')[this.selectedIndex].value,
el = document.getElementById(id),
top = el.offsetTop;
window.scrollTo(0,top);
};
Any help is hugely appreciated!!!!
Frank
You can use URL fragments to jump to the required page element. See the snippet below:
var select = document.getElementById('test');
select.onchange = function(){
var id = this.getElementsByTagName('option')[this.selectedIndex].value;
var link = window.location.href;
// If URL already has a fragment, remove it
if (link.indexOf('#') != -1)
link = link.substring(0, link.indexOf('#'));
// Add URL fragment with id of the div you want to jump to
window.location.href = link + '#' + id;
};
Just write
var id = 'YOUR ID HERE',
instead of
var id = this.getElementsByTagName('option')[this.selectedIndex].value,
what i would do is
$("#test").change(function(){
var val=$(this).val();
var divtext=""+$("#"+val+" p").html();// this is div content
});
I've figured it out!
Thanks for the different perspectives guys! Really helped me to stumble upon the answer!
You can delete/archive this post if needed. First time here so not sure on the protocol!
Thanks again
Frank

Javascript add ID and hash link to new ID

I "learned" JavaScript a few months ago but quickly picked up Python and spent the past few months writing programs in that language, so I decided it would be a good idea to go back and actually learn JavaScript. Right now I'm making a very simple "blog" with JS that takes the title of the post, generates a hash link from the post, and creates a recent posts section where you can click the link to jump to the post in the page.
For instance, say one of the posts is formatted like this:
<h2 class="post">Another post for you</h2>
<h4>I know you love these</h4>
With multiple posts, and an empty container at the bottom, which will be used to append the recent posts links:
<div id="get-post"></div>
My JS code basically grabs each title with the post class and creates a hash link from the element's title (removing spaces and commas). It then creates and appends a text node consisting of the post title, and then appends the entire link into the get-post container.
var postList = $('#get-post');
var post = $('.post');
function generateRecentPosts() {
post.each(function() {
// Create link from post title that will be used to
// access that post.
var postLink = document.createElement('a');
// Create text node from post title that will be appended
// to the postLink.
var text = document.createTextNode($(this).html());
// Add elements to the DOM.
postLink.href = createLocalLink($(this));
postLink.appendChild(text);
postList.append(postLink);
postList.append('<br />');
});
}
function createLocalLink(elm) {
// Creates the href link that will be used to go to a blog post.
// For example, if the title of the elm parameter is "My Post",
// a link is created called #My-Post that will be used to access
// that post.
elm.id = elm.html().replace(/,/g, '').replace(/\s/g, '-');
console.log(elm.id); // Make sure the ID is added.
return '#' + elm.id;
}
generateRecentPosts();
My problem is that the links it generates to not point to the ID created for each title. When I click on the link, I can see that it successfully created the href hash #My-Post and added it to the anchor tag, but it doesn't take me to the post title.
Example: http://jsfiddle.net/samrap/GQtxL/
I even added a console log function to make sure the ID is being added to the title as I thought that was the problem, but it isn't because the console is printing the correct new ID. I could really use some help in figuring out where exactly the problem is here.
Your h2 tags need to have an id or name attribute that corresponds with the link, that is what makes internal links work. The id is not getting added because you are accessing a jQuery object as if it were a DOM node (elm.id = ...). Modify your createLocalLink function to use jQuery's attr method to set the id property:
elm.attr('id', elm.html().replace(/,/g, '').replace(/\s/g, '-'));
Additionally, since you have jQuery available you could whittle your code down to:
var $this = $(this),
link = createLocalLink($this);
var $postLink = $('a', {
text: $this.text(),
href: link
})
postList.append($postLink).append('<br />');
Here is your fiddle updated: http://jsfiddle.net/GQtxL/1/
This is because your link uses the href = "#My-Post" but none of the posts has the ID "My-Post". It only has a class "post".
This happens because the argument that your are passing to the createLocalLink() function is a DOM Node. But by doing elm.id you are not changing the DOM property but adding another property to the "elm" object. Thus your "elm" object is
x.fn.x.init[1]
0: h2.post
context: h2.post
id: "Another-post-for-you"
length: 1
__proto__: Object[0]
Thus the actual post never gets the attribute ID only "elm" object gets it. Note the empty ID attribute below
draggable: false
firstChild: text
firstElementChild: null
hidden: false
id: ""
innerHTML: "Another post for you"
innerText: "Another post for you"
Thus your document has no element with the ID "My-Post". You can view the source of your HTML to verify this.
For internal links to work there should be an element with the same ID as that used in the href attribute of the link.
For example
<div id="post1">
Your Post Here
</div>
<!--just to show the effect of moving to the post-->
<div style="clear:both; height:900px"></div>
Click Here
This would work because there is an element with the id "post1" and the link uses the href "#post1" which links it to the corresponding element. Hence, add the corresponding id to your post as well (other than your link) for it to work.
In function createLocalLink you are using elm argument as dom node, but actually passing a jQuery wrapped object to it, which don't have id property. To get it work, use elm.get(0).id = ... or elm.attr('id', elm.text().replace(/,/g, '').replace(/\s/g, '-'););

Categories