I am writing $(this).closest('.comment').find('form').toggle('slow'); and the problem is each of the forms in the child is being toggled. I would like only the first form to be toggled. the html is something like the below and this is the a link
<div comment>
<a href>
<form>
</form>
<a href>
<div comment>
<form>
</form>
</div>
</div>
You can use either
$(this).closest('.comment').find('form').eq(0).toggle('slow');
or
$(this).closest('.comment').find('form:first').toggle('slow');
Use :first selector like below :
$(this).closest('.comment').find('form:first').toggle('slow');
using jquery simply use:
$( "form" ).first().toggle('slow');
I use
$([selector]).slice(0, 1)
because it's the most explicit way to select a slice of a query and because it can be easily modified to match not the first element but the next, etc.
The simplest way to get the first result of find is with good old [index] operator:
$('.comment').find('form')[0];
Works like a charm!
Use the below example for jquery find to get the first element
More filtring methods With Demo
$(document).ready(function(){
$(".first").first().css("background-color", "green");
});
.first{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery First Method Example By Tutsmake</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>This is first() method example</h1>
<div class="first">
<p>A paragraph in a div.</p>
<p>Another paragraph in a div.</p>
</div>
<br>
<div class="first">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
<br>
<div class="first">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
</body>
</html>
you can use like this
$(this).find('>.comment').find('>form').toggle('slow');
Related
I have a editor using HTML 5 tag contenteditable, there i'm using span inside contenteditable, when i remove all text then span also removed but i want span should not be removed, how to prevent it?
My Code:--
$('#editor').keyup(function(){
$('#spanText').text($(this).find('span').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
<br><br><hr>
<div id="spanText"></div>
I think there is no straightforward way to achieve that.
You can check the text length of the element to restore the element back.
Demo:
$('#editor').keyup(function(){
if(!$(this).text().length){
$(this).html('<span> </span>');
}
$('#spanText').text($(this).find('span').text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
</div>
<hr>
<div id="spanText"></div>
Move the contenteditable property to the span
<div>
<span contenteditable="true" id="editor">This is my text</span>
</div>
I'm trying to figure out how to target a section of characters from some generated HTML.
The output I have is:
<div class="entry-content">
[embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed] This is some other copy.
</div>
The desired output is:
<div class="entry-content">
<span class="hide">
[embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed]
</span> This is some other copy.
</div>
My goal is to wrap the [embed] tags in a <span class="hide"></span> that I can target via CSS. There are multiple instances of this HTML with different links inside the [embed][/embed] so I will most likely need to find a way to wrap the entire code into a span.
I was looking into .wrap(), but with no avail.you.
To achieve this you can use the html() method with a regular expression which pulls out the [embed]*[/embed] pattern and wraps it in a <span>. Try this:
$('.entry-content').html(function(i, html) {
return html.replace(/(\[embed\].+\[\/embed\])/gi, '<span class="hide">$1</span>');
});
.hide { background-color: yellow; } /* just for demo purposes */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-content">
[embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed] This is some other copy.
</div>
<div class="entry-content">
[embed]https://www.youtube.com/watch?v=dK45JuOsy5H[/embed] This is some other copy.
</div>
Basically what the title says - I'm wondering if there's a way to use .find() on the same jQuery selector multiple times. Or maybe using .find() more than once isn't the right way to do this?
Here's what I'm trying to accomplish:
HTML
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
JS
$("#foo").find("h2").html("New header");
$("#foo").find("p").html("New text");
Webstorm complains about the duplicated jQuery selector. Is there a different/better way to do this?
You can use next():
$("#foo").find("h2").html("New header")
.next("p").html("New Text");
To go back to a previous collection in chaining, we can use end()
$("#foo")
.find("h2")
.html("New header")
.end()
.find("p")
.html("New text");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
Use .addBack() to back to first selector after using .find() in chaining.
$("#foo").find("h2").html("New header").addBack().find("p").html("New text");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
The "right way" (the simplest way at least) is to use basic CSS selector syntax:
$("#foo h2").html("New header");
$("#foo p").html("New text");
Or more specifically, this:
$("#foo>h2").html("New header");
$("#foo>p").html("New text");
The first example targets any h2 that is a descendant of foo at any level, whereas the second targets any h2 that is an immediate descendant.
As for trying to do something like this:
x = $("#foo").find("h2").find("p");
This is equivalent to this:
x = $("#foo h2 p");
(You can verify this by going into debug after executing the statement and looking at x.selector.) Which means that you are looking for a paragraph inside a header inside foo:
<div id="foo">
<h2>A Header
<p>**Selector would find this**</p>
</h2>
</div>
And there isn't any such in your example.
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
var $foo = $("#foo");
$foo.find("h2").html("New header");
$foo.find("p").html("New text");
OR, if it's possible:
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
var htmlString = '<h2>New header</h2><p>New text</p>';
$("#foo").html( htmlString );
It says duplicated jQuery selector because you should ( when possible ) always cache your jQuery selectors, because it's wasteful calling $("#foo") each time you need that object.
So, your code should become like this
HTML
<div id="foo">
<h2>A Header</h2>
<p>Some text</p>
</div>
JS
var foo = $("#foo");
foo.find("h2").html("New header");
foo.find("p").html("New text");
I have this webpage. Here is the raw HTML page.
<body>
<p>GBN: <div id="output"></div>KH/s</p>
</body>
My problem is that the words are on different lines. How would I make it so that the worlds 'GBN:', '0' and 'KH/s' appear all on the same line?
Instead of using a <div id="output"> you could use <span id="output"> which is inherently inline.
Alternatively you could style the <div> with #output { display: inline-block;}.
Use <span> instead of <div>
Use a span instead of a div
<body>
<p>GBN: <span id="output"></span>KH/s</p>
</body>
Given the following html for a type of blog post editor:
<div class="entry">
<div class="title" contenteditable="true">
<h2>Title goes here</h2>
</div>
<div class="content" contenteditable="true">
<p>content goes here</p>
</div>
</div>
I'm trying to use jquery to select the .title and .content divs to attach unique event handlers to each.
$('[contenteditable]').on(...);
works for both but
$('[contenteditable] .title').on(...);
or
$('.title').attr('contenteditable', 'true').on(...);
both don't work to select the specific contenteditable block.
You could use the attribute selector in CSS .title[contenteditable="true"].
jsFiddle example
.title[contenteditable="true"] {
background: red;
}
In jQuery: $('.title[contenteditable]').css("background","red")
jsFiddle example
For the first example you have to remove the space between the attribute selector and the class selector, as a space implies descendance.
$('[contenteditable].title').on("click", function(){
$(this).css('color', 'orange');
});
Example: http://jsfiddle.net/2Bsk4/