I´ve got code:
<div class="gridContainer clearfix">
<div id="content">
<ul class="accordion" id="accordion">
<li class="bg4 bleft">
<div class="heading">Hello!</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Title</h2>
<p>text</p>
</div>
</li>
</ul>
</div>
</div>
and I need to change text on Hello! on Title and on text. How I could select tags with multiple classes and id's? the codes:
document.getElementsByClassName('bg4 bleft heading').innerHTML="bla";
document.getElementsByClassName('description').innerHTML="bla";
doesn´t work
Thanks!
Use :
document.getElementsByClassName('accordion bg4 heading').innerHTML="bla";
You need not add same classes of a particular html element as you did, but rather use a hierarchal way like above so that you can pin-point the element you need to focus.
Related
I'm trying to select a parent (with a specific class name) of an element of containing a certain attribute.
Here's how the HTML file looks like
<li class="parentClass...">
<div class="...">
<div class="...">
<div class="...">
<h3 class="...">
<a title="...">
<div class="...">
<a href="/user/userName"...></a>
Here's my JQuery (in a JS file)
$("a[href~='/user/userName']").closest("li[class^='parentClass']").hide()
So when I run this nothing happens.
If I console.log() the query it prints out an
[pevObject: r.fn.init(0)]
However if I run the command from the console in Chrome
I get an error:
Uncaught TypeError: $(...).closest(...).hide is not a function
To save you some time, yes when I remove the hide() function run it from the console it does print an element (which I can manually hide using chrome)
EDIT: fixed miss matched quotes
$('button').click(function(){
$("a[href~='/user/userName']").closest(".parentClass").toggle()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parentClass">
<div class="...">
<div class="...">
<div class="...">
<h3 class="...">
<a title="...">
<div class="...">
link
</div>
</a>
</h3>
</div>
</div>
</div>
</li>
<button>Toggle</button>
I have a demo application here and in the upper left corners of the "tweets" there are dots and I have no idea where they come from. The code is written in Ember and the template looks like this
<h2>Ember.js DEMO Tweet list</h2>
<div class="tweets-list">
<h2>Tweets</h2>
<button {{action 'changeAllTweets'}}>Change All Tweets</button>
<button {{action 'changeOneTweet'}}>Change One Tweet</button>
<div class="row input-wrap">
</div>
{{#each this.model.topTweets as |model|}}
<li class="media">
<div {{action 'bindNewModel' this}} class="row">
<a class="pull-left" href="#"><img class="media-object" width="75" height="75" src={{model.avatar}}/></a>
<div class="media-body">
<h4 class="media-heading">{{model.favorites}}</h4>
<p>{{model.text}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
Expand
</div>
<div class="col-xs-8">
<ul class="list-inline text-right">
<li href="#">Reply</li>
<li href="#">Retweet</li>
<li href="#">Favorite</li>
<li href="#">More</li>
</ul>
</div>
</div>
</li>
{{/each}}
</div>
P.S. The SHOW LIST button must be pressed for the list to show
It's because you're using list items, i.e. <li> tags. They're shown with bullet points by default.
First of all, you should only use <li> tags inside an ordered or unordered list (<ol> / <ul>). You should consider if list items are appropriate here. Maybe <div>s are more suitable?
If you want to use list items you should wrap them in a <ul> list and then get rid of the bullet points by applying the styling: list-style-type: none.
Changing the display style of the list item will also get rid of the bullet point.
These are the list item markers. Add list-style:none; to the ul, and they will disappear.
Edit: I see that you are also missing the ul itself. The wrapping ul does not exist. These are just list items. Add the opening ul before the each statement and closing after it. And in case the list style none rule.
I'm on mobile and can't edit the fiddle.
There is HTML structural error.
Wrap the <li class="media"> with an <ul> tag. I can assume you are using Bootstrap. If yes then wrap the <li> tag with <ul class="list-group"> and add list-group-item class to the <li> tag like this: <li class="media list-group-item">
i'm using MutationObserver to observe the DOM for insertions or changes of the DOM. But what I want to achieve additionally, is to reproduce the DOM changes in some kind of backend.
Lets say I have the following DOM:
<div class="container">
<div class="row marketing">
<div class="col-lg-6">
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
</div>
</div>
</div>
On click on a button, the corresponding parent li gets a new child element (h1, div, span, whatever). Now the MutationObserver gets fired, and I can get information on the added element (and maybe the children).
For some kind of replay though, I want to get the excact position of the parentNode of the inserted element.
Lets say I press the button of the second element, the DOM changes to
<div class="container">
<div class="row marketing">
<div class="col-lg-6">
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
<span>Example text</span> <!-- Node has been added -->
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
</div>
</div>
</div>
Now, what I need, is the excact position of this node. For example
div.container > div.row.marketing > li[2]
What I can't rely on are ID or something like this. I want to use this script on sites, where I don't have control over the DOM, or where is a lot of dynamic data, which makes it very inconvenient to add a unique ID to every element.
I have looked into XPath, which obviously isn't supported natively in javascript.
Does anyone has an idea how to achieve this?
this.faqLogic = function()
{
$('a .toggle').click(function(){
$('this .answer').show();
});
};
HTML:
<li class="clearfix question">
<a class="toggle" href="#">>
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>
There are multiple questions/answers of course. I just cant understand as to why it won't work at all. I'm getting no errors and required dependencies (jquery) are installed and called in first.
Any ideas?
Because you're trying to select elements of class .answer that are children of a <this> element. Clearly you have no <this> element.
Also, because you have a space between a .toggle, you're selecting elements of class .toggle that are children of an a element. You want a element that have class .toggle. No space for that selector, so it would be a.toggle.
All in all, perhaps you meant:
$('a.toggle').click(function(){
$('.answer').show();
});
I suggest that you take a read of how CSS selectors work in general. Your understanding could do with a bit of firming-up.
$('.toggle').click(function(){
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<li class="clearfix question">
<a class="toggle" href="#">
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>
I'm having trouble and I am not sure on how to tackle this problem.
I have a Spry Tabbed Panels Widget with content. I know that the 3-level, 5-container structure is essential for the Tabbed Panels widget to work properly, but I would like to add one more level (the container class below the main div), like this:
<div id="TabbedPanels1" class="TabbedPanels">
<div class="content">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
</div>
As far as I understand, in order to get this to work properly, I would have to modify the widget core. Can anyone point me in the right direction or help me modify the widget core?
Many thanks in advance!!
<div id="TabbedPanels1" class="TabbedPanels">
would work as
<div id="TabbedPanels1" class="TabbedPanels content">
so there is no need for another div layer...