I have this snippet of code, which fails at var link:
var obj = $(this[0]);
var html = obj.html();
var link = html.find('a[href*=/comment/reply]');
This is an ajax response from a submitted form. The output of what I get back from the var html is as follows:
===><div class="comment-new-success"><a id="new"></a>
<a id="comment-482"></a>
<div class="comment">
<div class="submitted">Submitted by NAME on Sun, 07/10/2011 - 12:48.<span class="new"> *new</span></div>
<div class="content clearfix"><p>123123123123122</p>
</div>
<div class="links_box"><ul class="links"><li class="comment_delete first">delete</li>
<li class="comment_edit">edit</li>
<li class="comment_reply last">reply</li>
</ul></div></div>
</div><===(string)
How do I properly get the "/comment/reply/6/482" variable as the var link in the above example. The code (I thought) should work fine, but doesn't
$('a[href*="/comment/reply"]')
See my jsfiddle: http://jsfiddle.net/hCbt3/ I grabbed the text from the link just to demonstrate it's correctly selecting the anchor.
Or grab the more specific one if you have more than one comment/reply:
$('a[href*="/comment/reply/6/482"]')
Try this :
$('a[href^="/comment/reply/"]')
Per JQuery docs, the Starts With Selector has the syntax: [name^="value"] and will select elements that have the specified attribute with a value beginning exactly with a given string.
The answer was this:
var link = $(this[0]).find('.comment_reply a').attr('href');
Related
I am trying to write a script that will get the grab the only if the parent structure is div.main-element input+label+ul.
Is there any appropriate way to set that up using javascript or jquery?
If anyone could direct me to the appropriate answer or documentation that would be absolutely awesome.
My end goal would be to replace the ul>li with an hr tag using either an append or .replace()
here is my HTML:
<div class='main-element'>
<input>
<label></label>
<ul>
<li>Example</li>
</ul>
</div>
<div class='main-element'>
<input>
<label></label>
</div>
You could check if the element that you want exists using this kind of code in jquery :
if($("div.main-element ul li").length){
//your code
}
This will execute on your html example, next you can modify the value of the first element using :
$("div.main-element ul li").append("blahblahblah");
Note that this gives you access to the first li tag found inside of a div.main-element>ul of your html page.
You can provide a second argument to a jquery call that is the parent container within which you want to get elements from. There is also a find function that does the same thing.
HTML:
<div class='main-element'>
<input>
<label></label>
<ul>
<li>Example</li>
</ul>
</div>
<div class='secondary-element'>
<input>
<label></label>
</div>
JS:
var $secondaryElement = $('.secondary-element');
var $secondaryInput = $('input', $secondaryElement);
Another approach:
var $secondaryInput = $('.secondary-element').find('input');
Both of the examples above will return ONLY the input element inside of the secondary-element div.
Does that answer your question?
Links:
https://api.jquery.com/find/
and
https://api.jquery.com/jquery/#selector-context
This will get all elements with your composition and replace ul>li by hr.
var elements = document.querySelectorAll(".main-element input+label+ul li");
for(var i = 0; i < elements.length; i++){
var parent = elements[i].parentNode.parentNode;
var ul = elements[i].parentNode;
ul.parentNode.removeChild(ul);
var hr = document.createElement("hr");
parent.appendChild(hr);
}
My code is pretty much explain itself of what I'm about to get :
<div id=player>
<div class="button hand">►</div>
<div class=time>00:00/02:25</div>
<div class="timeline hand"><span class="now hand"></span></div>
</div>
<script>
var myPlayer=document.getElementById('player').firstChild;
var playerStatus=(myPlayer.innerText||myPlayer.textContent);
console.log(playerStatus);
</script>
I'm expect to get the ascii value ► on console.
Small tweak needed here
Try this:
var myPlayer=document.getElementById('player').firstElementChild;
The problem is that the first child of #player is a text node itself. What you're looking for is the first element child of #player.
A minor note: firstElementChild isn't supported by IE8-.
You have both id and class available, so use querySelector().
var myPlayer=document.querySelector('#player > .button.hand');
This also has the benefit of working in IE8.
Also, a shortcut for innerText/textContent is to check for it at the top of your script, and store the appropriate key in a string.
var text = ("textContent" in document) ? "textContent" : "innerText";
Then use square brackets with the text variable.
var myPlayer=document.querySelector('#player > .button.hand');
var playerStatus=(myPlayer[text]);
Then you can actually shorten it like this:
var playerStatus=document.querySelector('#player > .button.hand')[text];
I have a json file and I can add a link as plain text to the body of articles, but I want to add the link to the href and add hand written content in the a tag:
$('div#similarArticles').html(treeObj.root[clickedID - 1].Link);
.. how can I go about this?
<div id="articles">
<div id="similarArticles">
</div>
</div>
You need to modify the <a>, not the <div>:
var link = treeObj.root[clickedID - 1].Link;
$("#similarArticles a").attr('href', link).text(handWrittenContent);
you can do it like this
var link = treeObj.root[clickedID - 1].Link;
$("#similarArticles").find('a').attr('href', link).text('thelinktext');
With jQuery 1.6 and above you can use:
$("#similarArticles").find('a').prop('href', link).text('thelinktext');
I'm trying to get some divs with an id to randomize the order they appear in. I've found a script that supposedly will do this, but for the life of me, I can't figure out why mine isn't working.
Basically, when the page loads the HTML will read like this:
<div class="main">
<div id="box">1</div>
<div id="box">2</div>
<div id="box">3</div>
<div id="box">4</div>
</div>
But the code when applied will randomize the order in which they appear (in the browser), like so:
<div class="main">
<div id="box">3</div>
<div id="box">1</div>
<div id="box">4</div>
<div id="box">2</div>
</div>
And here is the javascript that supposedly is making it all work:
function reorder() {
var grp = $(".main").children();
var cnt = grp.length;
var temp,x;
for (var i = 0; i < cnt; i++) {
temp = grp[i];
x = Math.floor(Math.random() * cnt);
grp[i] = grp[x];
grp[x] = temp;
}
$(grp).remove();
$(".main").append($(grp));
}
I thought it was because I had an id property, but even if I strip that out and just make it a plain old div tag, it doesn't work :/
Here is the the like to a js fiddle of the code in question...
js fiddle
There are a few questions here similar to this, but they're all older topics, so I hope no one minds my making a new one. I'm still pretty new to javascript, if that isn't already obvious :D
Just change
<div class=".main">
<div id="#box">1</div>
<div id="#box">2</div>
<div id="#box">3</div>
<div id="#box">4</div>
</div>
to
<div class="main">
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
</div>
Two errors :
the ".main" which should be "main" as you look for $(".main").children().
the id "#box" that you were using for more than one element
In your fiddle, you also forgot to import jQuery.
Demonstration (click "Run with JS")
First, as was said before, ID should be unique, and they don't start with a #. The selector for ids uses a #.
Same for classes, they should start with a letter, only the selector uses a dot.
Now for your fiddle. You visibly use jQuery, here, so include jQuery on your fiddle, in the menu on the left.
Then, what you are doing in your fiddle is defining a function, but you never call it.
Just add a call to your function at the end of your code (that will be called by jsFiddle on load of the document, like this:
reorder();
Worked for me on your fiddle.
for some reason both methods results are TextNode. It means that browser doesnot parse content of appended string.
for example
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").append(code);
on the page I do have content
"<div><p>Some</p> news are <span>here</span></div>"
this
$("#news_details").contents()
shows that string with html source is attached(for some reason unknown to me) as single textnode
but if will type in firebug
var text = $('#news_detaisl').text()
$('#news_details').contents().remove()
$('#news_details').append(text)
and after that, it is parsed and shows in a right way.
user the html()
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").html(code);
Since you haven't asked a question directly I can only assume what you want. Try this and tell me if it helps and if it was what you wanted:
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").append($(code));
Oh and $().append and $().html do NOT behave in the same way. $().append adds the input as a new child while $().html either returns the innerHTML of an element or sets it. Depending on whether you set a parameter.
only this code works fine, but such a weird behavior
var content = news.newsDetails(here async ajax request which load html snippet with content); //content is a string with html snippet from server
$("#news_content").append(content);
var value = $(".news_title").text();
$(".news_title").contents().remove();
$(".news_title").append(value);
$(".news_details").css('display','block')
and html snippet
<div class="news_details">
<img class="pointer" src="/static/img/close6.png" alt="close" width='16' height='16'>
<div class="news_head gradient">
<span>{{ item.pub_date|date:"d M Y" }}</span>{{ item.title }}
</div>
<div class="clear"></div>
<div class="news_title">{{ item.full_text }}</div>