javascript - Jquery html() method to get <li> html - Stack Overflow

admin管理员组

文章数量:1026676

I have an unordered list in my HTML

<ul>
   <li><div class="container1"><h2>list 1</h2></div></li>
   <li><div class="container2"><h2>list 2</h2></div></li>
   <li><div class="container3"><h2>list 3</h2></div></li>
</ul>

I want to get a particular <li> html using Jquery html() method

console.log($(".container1").closest('li').html()); // returns code from the div
output : <div class="container"><h2>list 1</h2></div>

I want the output as <li><div class="container1"><h2>list 1</h2></div></li> including <li> tags.

If I go one level above to closest('ul') its returning all the 3 li elements.

JSFiddle : /

I have an unordered list in my HTML

<ul>
   <li><div class="container1"><h2>list 1</h2></div></li>
   <li><div class="container2"><h2>list 2</h2></div></li>
   <li><div class="container3"><h2>list 3</h2></div></li>
</ul>

I want to get a particular <li> html using Jquery html() method

console.log($(".container1").closest('li').html()); // returns code from the div
output : <div class="container"><h2>list 1</h2></div>

I want the output as <li><div class="container1"><h2>list 1</h2></div></li> including <li> tags.

If I go one level above to closest('ul') its returning all the 3 li elements.

JSFiddle : http://jsfiddle/W4QfJ/417/

• javascript
• jquery
• html

Share Improve this question Follow asked May 28, 2015 at 17:02 budhavarapu rangabudhavarapu ranga 48333 gold badges77 silver badges1515 bronze badges 1

• Provided printing HTML content of that <li> in console is not the end-result here, what do you want to do with that <li> element next? If you lose the .html() at the end, you will have a perfectly good jQuery selector holding that same <li> element. You can do with it what you would do with any jQuery selection: remove it, move some place else, add after it, etc. – martynasma Commented May 28, 2015 at 18:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Try $(".container1").closest('li')[0].outerHTML (I think it is patible for most browsers-You probably need to check for IE)

So, this is more of a documentation than the answer as @tabz100 has the asnwer.

Few ways of getting the outer HTML (in the order of my preference):

// 1)
$(".container1").closest('li').prop("outerHTML");
// 2)
$(".container1").closest('li')[0].outerHTML;
// 3)
$(".container1").closest('li').wrap("<div></div>").parent().html();

I have an unordered list in my HTML

<ul>
   <li><div class="container1"><h2>list 1</h2></div></li>
   <li><div class="container2"><h2>list 2</h2></div></li>
   <li><div class="container3"><h2>list 3</h2></div></li>
</ul>

I want to get a particular <li> html using Jquery html() method

console.log($(".container1").closest('li').html()); // returns code from the div
output : <div class="container"><h2>list 1</h2></div>

I want the output as <li><div class="container1"><h2>list 1</h2></div></li> including <li> tags.

If I go one level above to closest('ul') its returning all the 3 li elements.

JSFiddle : /

I have an unordered list in my HTML

<ul>
   <li><div class="container1"><h2>list 1</h2></div></li>
   <li><div class="container2"><h2>list 2</h2></div></li>
   <li><div class="container3"><h2>list 3</h2></div></li>
</ul>

I want to get a particular <li> html using Jquery html() method

console.log($(".container1").closest('li').html()); // returns code from the div
output : <div class="container"><h2>list 1</h2></div>

I want the output as <li><div class="container1"><h2>list 1</h2></div></li> including <li> tags.

If I go one level above to closest('ul') its returning all the 3 li elements.

JSFiddle : http://jsfiddle/W4QfJ/417/

• javascript
• jquery
• html

Share Improve this question Follow asked May 28, 2015 at 17:02 budhavarapu rangabudhavarapu ranga 48333 gold badges77 silver badges1515 bronze badges 1

• Provided printing HTML content of that <li> in console is not the end-result here, what do you want to do with that <li> element next? If you lose the .html() at the end, you will have a perfectly good jQuery selector holding that same <li> element. You can do with it what you would do with any jQuery selection: remove it, move some place else, add after it, etc. – martynasma Commented May 28, 2015 at 18:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Try $(".container1").closest('li')[0].outerHTML (I think it is patible for most browsers-You probably need to check for IE)

So, this is more of a documentation than the answer as @tabz100 has the asnwer.

Few ways of getting the outer HTML (in the order of my preference):

// 1)
$(".container1").closest('li').prop("outerHTML");
// 2)
$(".container1").closest('li')[0].outerHTML;
// 3)
$(".container1").closest('li').wrap("<div></div>").parent().html();

本文标签： javascriptJquery html() method to get ltligt htmlStack Overflow