This code is after the browser's loaded. I need to change the li class buddyName - "Strider" to "Aragon".
<script src="./scripts/fellowship.js"></script>
<main>
<section id="Middle-Earth">
<article class="the-shire">...</article>
<article class="rivendell">
<h1>Rivendell</h1>
<aside>
<ul id="myBuddy">
<li class="buddyName">Gandalf the Grey</li>
<li class="buddyName">Legolas</li>
<li class="buddyName">Gimli</li>
<li class="buddyName">Strider</li>
<li class="buddyName">Boromir</li>
</ul>
</aside>
</article>
<article class="morder">...</article>
</section>
</main>
This was my most recent attempt but not working:
document.querySelectorAll('buddyName'[3]).innerHTML = "Aragorn";
You would use getElementsByClassName to get all li tags. The next step is select the fourth element of the array and change the value.
document.getElementsByClassName('buddyName')[3].innerHTML= "Aragorn";
Related
I would like to clone an element inside a div and append it to another div without any click event, on page load. This is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hs-search-results__listing">
<li>
Search Title
<p class="more-link-container">
</p>
</li>
<li>
Search Title
<p class="more-link-container">
</p>
</li>
</ul>
<script>
$('.hs-search-results__listing li').each(function(){
$(this).find('.hs-search-results__title').clone().appendTo(".more-link-container");
});
</script>
I am trying the above but it is not working.
In each iteration you are appending to all the elements with class more-link-container available in the DOM. You should append the element only to the relevant p element.
Change
.appendTo(".more-link-container")
To
.appendTo($(this).find(".more-link-container"))
$('.hs-search-results__listing li').each(function(){
$(this).find('.hs-search-results__title').clone().appendTo($(this).find(".more-link-container"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hs-search-results__listing">
<li>
Search Title
<p class="more-link-container">
</p>
</li>
<li>
Search Title
<p class="more-link-container">
</p>
</li>
</ul>
I have a body with ID body and inside it a div with class nav-container. I want to remove certain classes when users click on the #body, but not .nav-container (it's an overlay type of menu).
Tried below code
HTML:
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
</body>
jQuery
$('#body :not(.nav-container)').click(function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
It does not seem to be working for me though.
It wont work as not exclude the selected elements which pass the earlier css-selector criteria since .nav-container is not part of list that is selected by #body (wont be list in this case as its ID), so you wont be able to exclude that.
So basically what you need is
$(document).on("click", "div:not('.nav-container')",function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
the first element shouldn't be the parent, like #body, rather the element. for example div:not('example') works for every div except example.
$("div:not(.nav-container)").click(function() {
alert("nav-container was not clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
<br />
<div>click here </div>
</body>
I'm trying to get the contents of a div and display them as the last li on a ul for a mobile menu. The markup for the content is generated with php so I can't simply append html.
I have tried using sethtml and append without success.
This is my attempt:
$("#mobile-menu li").last().append($("#header-top-widget-area-2 div").innerHTML);
Here is the markup generated with php that I need to display as the last li in mobile menu:
<div class="ewf-span6 text-right" id="header-top-widget-area-2">
<div id="text-3" class="widget widget_text">
<h3 class="widget-title"><span> </span></h3>
<div class="textwidget">
<ul class="social-icons">
<li class="facebook"><img class="social-icon" src="/wp-content/uploads/2014/05/fb_responsive.png" alt="facebook-icon"></li>
<li class="linkedin"><img class="social-icon" src="/wp-content/uploads/2014/05/linkedin_responsive.png" alt="linkedin-icon"></li>
<li class="twitter"><img class="social-icon" src="/wp-content/uploads/2014/05/twitter_responsive.png" alt="twitter-icon"></li>
</ul>
<ul class="green-menu">
<li>Contact Us</li>
<li class="border">Blog</li>
</ul>
</div>
</div>
</div>
You need to create a new <li> element, populate it with your content, and append it to your <ul> element:
var newLi = $("<li />");
newLi.html($("#header-top-widget-area-2 div")[0].innerHTML);
$("#mobile-menu").append(newLi);
Here is my Fiddle I am currently working with. http://jsfiddle.net/Nemi9/76JPk/29/
I want keep everything sortable, but want to add the editable function to all the ul on a click or mouse down. I am currently trying to make each list and any new items added to each list .editable they are currently all .sortable. The top code is the code I am currently using to try to make lines 17- 45 in HTML editable when clicked on. I want the person to be able to click on each listed item and add their own text inside the field.
I put contenteditable= true into each list id
These lines below are 63- 66 in .JS
var editable1 =$("#names,#homes,#purchased").editable();
$("#names,#homes,#purchased",editable1).click(function(ev){
$("#names,#homes,#purchased").input(type=submit)
Here is my current HTML
<div class="box1">
<h3>Needed Items</h3>
<ul id="names" contenteditable="true"/>
<li class="ui-state-default">Carrot</li>
<li class="ui-state-default">Onion</li>
<li class="ui-state-default">Water</li>
</ul>
</div>
<div class="box2">
<h3>Home Items</h3>
<ul id="home" contenteditable="true"/>
<li class="ui-state-default">Cookies</li>
<li class="ui-state-default">Milk</li>
<li class="ui-state-default">Chicken</li>
</ul>
</div>
<div class="box3">
<h3>Purchased Items</h3>
<ul id="purchased" contenteditable="true"/>
<li class="ui-state-default">Potato</li>
<li class="ui-state-default">Rum</li>
<li class="ui-state-default">Coke</li>
</ul>
</div>
I would like to find the class of the parent element of the child with .current.
var currentli = $('.nav').find('a.current').parent().attr('class');
console.log(currentli);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
but it always throws me undefined
NOTE: I don't know which a currently has .current which is why I have to use the .find() method.
Your code should already work, but it might be more reliable to access the property className instead:
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
This will work:
var currentli = $($('.nav').find('a.current')).parent().attr('class');
console.log(currentli);
I'm simply transforming the found collection into a jQuery object again.
See fiddle: http://jsfiddle.net/RaphaelDDL/wnW4u/
Ps.: If more than one a has class="current", only the first one will be retrieved.
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>