如何使用event.target访问特定的孩子及其文本？

Question

考虑这个HTML代码：

<div id="container"> 
<div class="c1">Text1 
<p class="pc1">Paragraph1</p> 
</div> 
<div class="c1">Text2 
<p class="pc1">Paragraph2</p> 
</div> 
</div> 

而这里的脚本我想：

<script> 
$(document).ready(function(){ 
$("#container").click(function(e){ 
var a=e.target.children().text(); 
//I want to store the text in the paragraph (e.g. Paragraph 1, when I click the first div) in var a. 
var b=e.target.childNodes[0].nodeValue; 
//I want to store the text in the div (e.g. Text1, when I click the first div) in var b. 
}); 
}); 
</script> 

但它不工作。我知道我写错了什么。使用event.target属性访问这些文本的正确方法是什么？

Answer 1

e.target的问题是它可能是c1元素或pc1元素。

您可以点击事件针对c1元素，然后找到c1的第一个孩子，并将其值

$(document).ready(function() { 
 
    $("#container").on('click', '.c1', function(e) { 
 
    var text = this.firstChild.nodeValue.trim(); 
 
    snippet.log(text); 
 
    }); 
 
    //using a gloabl handler, they way you have used 
 
    $("#container").click(function(e) { 
 
    var text = $(e.target).closest('div').contents().first().text(); 
 
    snippet.log('2: ' + text); 
 
    }); 
 
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="c1">Text1 
 
    <p class="pc1">Paragraph1</p> 
 
    </div> 
 
    <div class="c1">Text2 
 
    <p class="pc1">Paragraph2</p> 
 
    </div> 
 
</div>

Answer 2

$(document).ready(function() { 
 
    $("#container").click(function(e) { 
 
    var a = $(e.target).children().text(); 
 
    //I want to store the text in the paragraph (e.g. Paragraph 1, when I click the first div) in var a. 
 
    alert(a) 
 
    //I want to store the text in the div (e.g. Text1, when I click the first div) in var b. 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="c1">Text1 
 
    <p class="pc1">Paragraph1</p> 
 
    </div> 
 
    <div class="c1">Text2 
 
    <p class="pc1">Paragraph2</p> 
 
    </div> 
 
</div>

添加$()至让jQuery对象，那么你可以使用.children()

Answer 3

既然你是e.target的text node还有nested <p>，使用jQuery .contents()过滤器会是一个更好的选择了。

$("#container").children().click(function(e) {  // limit events to children of #container 
    var selectElm = $(e.target); 
    var a,b; 
    selectElm.contents().filter(function(index,node){ // filter through the contents of selected elm 
     if(index === 0){         // only takes values of the first node (text only) 
     selectElm.is('p') ? a = $(this).text() : b = $(this).text() ; // assign a and b vars 
     }  
    }); 
    }); 

见Demo

...和较短的版本W/O使用.contents()，

$("#container").children().click(function(e) {  // limit events to children of #container 
    var a,b; 
    $(e.target).is('p') ? a = e.target.childNodes[0].nodeValue : b = e.target.childNodes[0].nodeValue ; 
});