Question

var cName = ($(".myclass").next().attr('class'));
alert(cName);

if (cName == "c1") {

$("#Output").addClass("green");
$("#Output").removeClass("red");

} else {

$("#Output").addClass("red");
$("#Output").removeClass("green");
}

<p class="myclass">If you click on me, I will disappear.
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
<span class="c4"></span>
<div class="d1"></div>
<div class="d2"></div>
<div id="Output" style="width:25px; height:25px;"></div>
</p>

我正在尝试获取第一个.classname元素的span。为什么jquery没有提取下一个span元素.classname？请帮忙。

Answer 1

next()正在获取p元素的兄弟，而不是第一个子元素。为了得到第一个孩子，请

var cName = $(".myclass").children().first().attr('class');

console.log($(".myclass").children().first().attr('class'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p class="myclass">If you click on me, I will disappear.
  <span class="c1"></span>
  <span class="c2"></span>
  <span class="c3"></span>
  <span class="c4"></span>
  <div id="Output" style="width:25px; height:25px;"></div>
</p>

Answer 2

var cName =($(".myclass").next().attr('class'));

此处next()元素将获得下一个<p>兄弟而不是span元素。如果您需要获取下一个span元素，请使用此

var cName =$(".myclass span:first-child").attr('class');

Answer 3

在 p 标记内定义 div 标记不是一种正确的方法。因此您无法访问这些子 div 元素。开始 div 标记会自动关闭 p 标记。因为<p>元素的结束标记是可选的。

这意味着<p>标记只能包含内联元素。

<!ELEMENT P - O (%inline;)*            -- paragraph -->

不允许在<p>元素内定义块元素。

请参阅以下链接，其中详细介绍了块和内联元素：

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

并且还参考已经讨论过的以下堆栈溢出链接：

Putting <div> inside <p> is adding an extra <p>

Why <p> tag can't contain <div> tag inside it?

希望这可以帮助你......

JQuery获取Next的第一个元素类名

3 个答案: