I'm trying to access the elements that are appended by a library that I use in my code, but I can't access them. I have this line in my html.
<div class="bonds" id="original" style="display:block;"></div>
The library that I use will append some elements in here. So from the DOM inspector, it shows something like this.
<div class="bonds" id="original" style="display:block;">
<!-- append start -->
<div class="FL-main fieldsLinker">
<div class="FL-left">
<select></select>
<ul>
<li data-offset="0"></li>
<li data-offset="1"></li>
<li data-offset="2"></li>
</ul>
</div>
</div>
<!-- append ended -->
</div>
I'm trying to access the <ul></ul> element using the methods below but nothing works.
$('#original').children().children().children();
var original = $('#original').find('ul');
My goal is to append <span class="icon-close"></span> in each of <li></li> element when the page is loaded.
You could use JQuery find method to find the ul and loop over it's children.
Add your script at the end of all scripts. (library scripts).
$('#original').find('ul li').each(function(i) {
$(this).append('<span class="icon-close"></span>');
});
Related
I have a web page. This web page has an area with some dynamically generated HTML. I want to get the first element (not all elements) within this area that has a custom attribute of a specific name. I then want to get that attribute value. I've setup a Fiddle. The code is like this:
<div id="myElement">
<div>
<div>
<ul>
<li></li>
<li><div data-custom-property="12345">
<p>
Some details
</p>
<div>
<div>
<div data-custom-property="xyzwt">
Stuff
</div>
</div>
</div>
</div></li>
<li></li>
</ul>
</div>
</div>
</div>
<button onclick="return getFirstElementWithProperty('data-custom-property');">
Get Element
</button>
Basically, I'm trying to get the first element within myElement that has the data-custom-property attribute. Everything I've seen (1, 2) involves looking for the value of an attribute. I want to search by name.
How do I find it?
If it will always be a div, and you know the element's ID:
$("#myElement div[data-custom-property]:first")
Otherwise, this will work, too, though it's best to be as specific as possible:
$("[data-custom-property]:first")
I am using jsoup to parse an html document. I need to extract all the child div elements. This is basically div tags without nested div tags. I used the following in java to extract div tags,
Elements bodyTag = document.select("div:not(div>div)");
Here is an example:
<div id="header">
<div class="container">
<div id="header-logo">
<a href="/" title="mekay.com">
<div id="logo">
</div> </a>
</div>
<div id="header-banner">
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
</div>
</div>
</div>
I need to extract only the following:
<div id="logo">
</div>
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
Instead, the above code snippet is returning all the div tags. So, could you please help me figure out what is wrong with this selector
This one is perfectly working
Elements innerMostDivs = doc.select("div:not(:has(div))");
Try it online
add your html file
add css query as div:not(:has(div))
check resulted elements
If you want only div leafs that do not have any children then use this
Elements emptyDivs = document.select("div:empty");
The selector you are using now means fetch me all the divs that are not direct children of another div. It is normal that it brings the very first parent div, because the div id="header" is not a direct child of a div. Most likely its parent is body.
I'm having the biggest brainfart ever right now...
I need to append i amount of slides (which can be blank), but they have to have a specific classes for the internal divs, and a specific ID consisting of i in the slides name.
<ul class="bjqs"><!-- Target This -->
<li id="slide0"><!-- Append these -->
<div class="center"><!-- Append these -->
<span class="author"></span><!-- Append these -->
<span class="time"></span><!-- Append these -->
</div>
<div class="image"></div><!-- Append these -->
</li>
<li id="slide1"><!-- Append these -->
<div class="center"><!-- Append these -->
<span class="author"></span><!-- Append these -->
<span class="time"></span><!-- Append these -->
</div>
<div class="image"></div>
</li>
<li id="slide2">... etc
</ul>
Perhaps a basic for loop would work...?
var slideCount = 20;
for(var i = slideCount-1;i>=0;i--){
$('ul.bjqs').after('<li id="slide'+i+'"><div class="center"><span class="author"></span><span class="time"></span></div><div class="image"></div></li>');
}
(Well, it DOES work... but is there a cleaner way?)
It depends of the need and how you prefer to do it.
If you have already a slide at the moment you need to create the others, you can use clone method :
var slideCount = 20;
for(var i = slideCount-1;i>=0;i--){
$('ul.bjqs').after($('#slide0').clone().attr('id', 'slide'+i));
}
Here is the documentation.
Else, your method is not so bad. I personally don't like to output html with js like this, since you will have several files to maintain if you got to change your layout (at least html and js file). A good way to do could be to clone (see above) an hidden empty slide at the beginning, and then delete it after the generation of others.
a cleaner way would be to use a two-way binding library like angular.js
HTML
<li ng-repeat="slide in slides" id="slide{{$index}}">
<div class="center">
<span class="author">{{slide.author}}</span>
<span class="time">{{slide.time}}</span>
</div>
<div class="image"></div>
</li>
JS
$scope.slides=[{author:"Chris",time:"Tues"},{author:"Owen",time:"Wed"}];
While using jQuery Mobile <ul data-role="listview">, I am trying to add some <li>s from JavaScript, but the new <li> is not inheriting the jQuery Mobile styles. Here is the code:
<head>
<script>
function init()
{
msg = "<li> <a href=> New List Item </a></li>";
document.querySelector('#add_item').innerHTML += msg;
}
// call init on load
window.addEventListener('load',init,false);
</script>
</head>
<body>
<div id='main' data-role='page' data-theme='c'>
<div data-role='header'>
<h1>Welcome!</h1>
</div>
<div id='content' data-role='content'>
<ul data-role="listview" id="list_cars">
<div id="add_item">
</div>
<li> List Item 1</li>
<li> List Item 1</li>
</ul>
</div>
<div data-role='footer'>
<h4>Enjoy reading the book ...</h4>
</div>
</div> <!-- End of Min page -->
</body>
First, you're putting your <li> inside a <div> instead of directly inside the <ul>. Try changing your querySelector to...
document.querySelector('#list_cars').innerHTML += msg;
or, if you want the item at the top of the list, use this...
document.querySelector('#list_cars').innerHTML = msg + document.querySelector('#list_cars').innerHTML;
Then, you need to tell jQuery Mobile to update that list view by adding...
$('#list_cars').listview('refresh');
The last section on this jQuery Mobile Documentation page about lists describes this feature.
Working example here: http://jsbin.com/omepob/1/
To apply the properties on the new object, the optimal way is to call jQuery's refresh method for the object:
$("#myobject").listview("refresh");
However, I encourage you to replace this innerHTML call for something more DOM-atic, like:
var myli = document.createElement("li");
myli.appendChild(document.createTextElement("List Item 3"));
BTW, agreed with Travis; better include a "ul" as a parent of "li" instead of using a "div" there...
I need to add an attribute to the first link of a list of links in a project I'm working on and thinking of a way to do this using JavaScript. Here are the codes below, they are dynamically generated but what I want is to figure out a way to insert id="cover_title" in the first tag of every list of with the sequence of , So that the code looks exactly like below. Any ideas?
<ul id="gallery">
<li id="album">
<div id="album_title">Summer 2012</div>
<div id="photo"><a id="cover_title" href="#"><img src="images/photo1.png"/></a></div>
<div id="photo"><img src="images/photo2.png"/></div>
<div id="photo"><img src="images/photo3.png"/></div>
<div id="photo"><img src="images/photo4.png"/></div>
<div id="photo"><img src="images/photo5.png"/></div>
</li>
<li id="album">
<div id="album_title">Spring 2012</div>
<div id="photo"><a id="cover_title" href="#"><img src="images/photo1.png"/></a></div>
<div id="photo"><img src="images/photo2.png"/></div>
<div id="photo"><img src="images/photo3.png"/></div>
<div id="photo"><img src="images/photo4.png"/></div>
<div id="photo"><img src="images/photo5.png"/></div>
</li>
In the first place a note: id comes from identifier and has to be unique throughout the document. Your code should use the class="" attribute instead. See, e.g., MDN on this:
The ID must be unique in a document, ....
That being said, the below code sets the appropriate class on th <a>-element, assuming that you transformed all id attributes above into class.
var links = document.querySelectorAll( 'div.photo:nth-child(2) a' );
for( var i=0; i<links.length; ++i ) {
links[i].classList.add( 'cover_title' );
}
EDIT
Here is an example fiddle: link.
Vega said it right: don't do dublicate ID, use class. Simple in jQuery
$('.album_title').each(function(){
$(this).find('a:first').addClass('cover_title');
});