Question

我有像这样的html“

<div id="words" style="opacity: 1; visibility:hidden;">
    <div id="row1" style="top: 1px;">
        <span wordnr="0" class="highlight">took</span>
    </div>
</div>

我希望获取那我怎么能用这个孩子的jquery呢？

我试过了：

<script>
   var a=$("#words").children('#row1').children('.highlight');
   alert( a );
</script>

Answer 1

有效的html ID是唯一的，因此您只能使用row1。还有一件事将代码放在document.ready中以确保javascript/jquery的可用性。

<强> Live Demo

$(document).ready(function(){
  $('#row1').children('.highlight').each(function(){
      alert($(this).text()); 
  });
});

如果你只通过选择器获得一个元素，你甚至不需要每个元素。

 var forTook = $('#row1').children('.highlight').text();

或

var forTook = $('#row1 .highlight').text();

Answer 2

只是详细说明;你不能像你的例子那样警告jquery对象：

var a = $("#words").children('#row1').children('.highlight');

在这种情况下，a将是一个jQuery对象，它具有类似于数组的结构。

考虑到上述情况（假设您选择了正确的元素），您可以像在@Adil的示例中一样迭代它：

$.each(a, function(i, el){
    alert($(el).text());
});

Answer 3

试试这个：将.find()与.children()

一起使用

$("#words").children().find('.highlight').text();

Answer 4

如果您的HTML中有多个.highlight元素，则必须迭代它们：

$('#row1 .highlight').map(function() {
    return $(this).text();
}).get();

这将返回一个包含所有突出显示的单词的数组。

Answer 5

你快到了那里：

<script>
   var a = $('#words').children('#row1').children('.highlight').text();
   alert( a );
</script>

正如Adil所说，如果有多个匹配元素，你需要循环遍历匹配元素。

如何使用'children'jQuery选择器只显示div的子跨度内容？

5 个答案: