javascript jquery获取子节点 - 如何获得$(this)选择器的子节点?




js获取所有兄弟节点 jquery获取兄弟节点 (14)

jQuery的each都是一个选项:

<div id="test">
    <img src="testing.png"/>
    <img src="testing1.png"/>
</div>

$('#test img').each(function(){
    console.log($(this).attr('src'));
});

我的布局类似于:

<div id="..."><img src="..."></div>

并希望使用jQuery选择器在单击时选择div的子img

为了得到div ,我有这个选择器:

$(this)

如何使用选择器获取子img


直接的孩子是

$('> .child', this)

您可以使用Child Selecor引用父级中可用的子元素。

$(' > img', this).attr("src");

以下是如果您没有引用$(this)并且您想在其他函数的div引用img

 $('#divid > img').attr("src");

您可以在下面找到父div的所有img元素

$(this).find('img') or $(this).children('img')

如果你想要特定的img元素,你可以像这样写

$(this).children('img:nth(n)')  
// where n is the child place in parent list start from 0 onwards

你的div只包含一个img元素。 所以对于这个,下面是正确的

 $(this).find("img").attr("alt")
                  OR
  $(this).children("img").attr("alt")

但是如果你的div包含更多img元素,如下所示

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">
</div>

那么你不能使用高位代码来找到第二个img元素的alt值。 所以你可以尝试这个:

 $(this).find("img:last-child").attr("alt")
                   OR
 $(this).children("img:last-child").attr("alt")

此示例显示了如何在父对象中查找实际对象的一般概念。 您可以使用类来区分子对象。 这很简单有趣。 即

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">
</div>

你可以这样做:

 $(this).find(".first").attr("alt")

更具体的是:

 $(this).find("img.first").attr("alt")

您可以使用上面代码中的查找或子项。 欲了解更多信息,请访问儿童http://api.jquery.com/children/并查找http://api.jquery.com/find/ 。 参见示例http://jsfiddle.net/lalitjs/Nx8a6/


$(document).ready(function() {
  // When you click the DIV, you take it with "this"
  $('#my_div').click(function() {
    console.info('Initializing the tests..');
    console.log('Method #1: '+$(this).children('img'));
    console.log('Method #2: '+$(this).find('img'));
    // Here, i'm selecting the first ocorrence of <IMG>
    console.log('Method #3: '+$(this).find('img:eq(0)'));
  });
});
.the_div{
  background-color: yellow;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my_div" class="the_div">
  <img src="...">
</div>


在不知道DIV的ID的情况下,我认为你可以选择这样的IMG:

$("#"+$(this).attr("id")+" img:first")

你的<div>可能有0到多个<img>标签。

要查找元素,请使用.find()

为了保证代码安全,请使用.each()

在0 <img>元素的情况下,同时使用.find().each()可防止空引用错误,同时还允许处理多个<img>元素。

// Set the click handler on your div
$("body").off("click", "#mydiv").on("click", "#mydiv", function() {

  // Find the image using.find() and .each()
  $(this).find("img").each(function() {
  
        var img = this;  // "this" is, now, scoped to the image element
        
        // Do something with the image
        $(this).animate({
          width: ($(this).width() > 100 ? 100 : $(this).width() + 100) + "px"
        }, 500);
        
  });
  
});
#mydiv {
  text-align: center;
  vertical-align: middle;
  background-color: #000000;
  cursor: pointer;
  padding: 50px;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="mydiv">
  <img src="" width="100" height="100"/>
</div>


您可以使用以下任一方法:

1找():

$(this).find('img');

2个孩子():

$(this).children('img');

jQuery构造函数接受名为context的第二个参数,该参数可用于覆盖选择的上下文。

jQuery("img", this);

这与使用.find()一样的:

jQuery(this).find("img");

如果你想要的imgs 只是被点击元素的直接后代,你也可以使用.children()

jQuery(this).children("img");

试试这段代码:

$(this).children()[0]

如果您的DIV标记后面紧跟IMG标记,您还可以使用:

$(this).next();

在jQuery中引用一个孩子的方法。 我在以下jQuery中总结了它:

$(this).find("img"); // any img tag child or grandchild etc...   
$(this).children("img"); //any img tag child that is direct descendant 
$(this).find("img:first") //any img tag first child or first grandchild etc...
$(this).children("img:first") //the first img tag  child that is direct descendant 
$(this).children("img:nth-child(1)") //the img is first direct descendant child
$(this).next(); //the img is first direct descendant child

你也可以使用

$(this).find('img');

这会返回所有作为div后代的img


我可以分享点和使用节点js的原因。

  1. 对于聊天,协作编辑等实时应用程序,我们更好地使用nodejs,因为它是事件库,其中火灾事件和数据来自服务器的客户端。
  2. 简单易懂,因为它是javascript基础,大多数人都有想法。
  3. 大多数当前的Web应用程序都转向角度js和骨干,使用节点很容易与客户端代码交互,因为它们都将使用json数据。
  4. 很多插件可用。

缺点:-

  1. Node将支持大多数数据库,但最好的是mongodb,它不支持复杂的连接和其他。
  2. 编译错误......如果任何错误,应用程序将停止工作,我们需要再次手动或使用任何自动化工具启动它,开发人员应该处理其他每个例外。

结论: - Nodejs最适合用于简单和实时的应用程序。如果你有非常大的业务逻辑和复杂的功能,那么最好不要使用nodejs。如果您想构建一个应用程序以及聊天和任何协作功能..节点可以在特定部分使用,并保持应该与您的便利技术。





javascript jquery jquery-selectors this