如何加载内容 <h> 使用jQuery元素

Question

I have a tag like:

<h3>Mobile
    <img align="middle" alt="Edit" class="attEditCategory" src="/Images/edit.png">
    <img align="middle" alt="Delete" class="attDeleteCategory" src="/Images/delete.png">
</h3>

I want to display the text of h3 ie "Mobile" in edit click button (on alert).

$(".attEditCategory").button().on("click", function (event) {});

Please help.

Answer 1

You can use $(this).parent().text() to get the text. Or $(this).closest('h3').text() if there could be more to the hierarchy than shown.

Eg:

 $(".attEditCategory").button().on("click", function (event) { alert($(this).parent().text()); }); 

 <link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> <h3>Mobile <img align="middle" alt="Edit" class="attEditCategory" src="/Images/edit.png"> <img align="middle" alt="Delete" class="attDeleteCategory" src="/Images/delete.png"> </h3> 

If there could be text inside the buttons (eg, button or a elements rather than img ), $(this).parent().text() would include that text. So in that hypothetical case, it's more difficult (but still quite simple) to get just the text of the element itself and not the text of its children:

alert($(this).parent().contents().map(function() {
    return this.nodeType === 3 ? this.nodeValue : ""; // 3 = text node
}).get().join(""));

 $(".attEditCategory").button().on("click", function (event) { alert($(this).parent().contents().map(function() { return this.nodeType === 3 ? this.nodeValue : ""; // 3 = text node }).get().join("")); }); 

 <link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> <h3>Mobile <a align="middle" alt="Edit" class="attEditCategory">edit</a> <a align="middle" alt="Delete" class="attDeleteCategory">delete</a> </h3> 

Answer 2

try

$(".attEditCategory").on("click", function (event) {
    alert($(this).parent().text())

});

DEMO

Answer 3

SInce the class is a child of the h3 use parent() to target the <h3> and text() to get the text

$(".attEditCategory").button().on("click", function (event) {
   alert( $(this).parent().text());
});

Answer 4

  $("h3").text();

Official documentation .

To access a specific h3 tag with a class or an id you do something like:

 $("#foo").text(); //foo is the id
 $(".foo").text(); //foo is the class

Answer 5

Simply:

$('h3').text();

And it returns just: "Mobile" . It'll be enough to alert:

alert($('h3').text());