Question

我很少有动态生成的div。

我想检测输入哪个div内容，然后对其他div执行一些操作。

例如 -

import React from "react";

export class Header extends React.Component {
    render() {
        return (
            <nav className="navbar navbar-default">
                <div className="container">
                    <div className="navbar-header">
                        <ul className="nav navbar-nav">
                            <li><a href="">Home</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        );
    }
}

如果我有上面的3个div并且我输入了第二个div中的一些内容，我想在里面检测输入文本的示例类div然后对div的其余部分执行一些操作，比如说边框红色或输入一些段落标签。

我怎么能用javascript或jquery做到这一点？

Answer 1

您可以过滤掉已填充的div，然后对结果执行操作：

＆＃13;

$('.example').filter(function() {
  return $(this).text().trim() === '';
}).text('test');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example"></div>
<div class="example">Some random text</div>
<div class="example"></div>

＆＃13;

以上内容仅会将文字test分配给空div。

Answer 2

您可以使用.not()来消除触发事件的元素。我不确定触发事件的文本是如何进入div的，所以我将使用click事件给出一个示例：

$(document).ready(function() {
  $('.example').on('click', function() {
    $('.example').not(this).each(function() {
      console.log($(this));
      //do something with $(this)
    });
  });

});

（您需要将'click'更改为相应的事件。）

检测输入的元素内容

2 个答案: