Question

所以我试图弄清楚，但是已经不费吹灰之力尝试寻找孩子们了……

$("#loop").on('click',function(){
    kid= $("#some123").children();
    for(i in kid){
      console.log($(kid[i]).html())
    }
  })
  $("#loop2").on('click',function(){
    kid= $("#some123").find('li');
    for(i in kid){
      console.log($(kid[i]).html())
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol id='some123'>Items
  <li draggable='true'>Item 1</li>
  <li draggable='true'>Item 2</li>
  <li draggable='true'>Item 3</li>
  <li draggable='true'>Item 4</li>
</ol>
<div id='loop'>Loop1</div>
<div id='loop2'>Loop2</div>

每次抛出错误并停止我的脚本。

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

有人知道为什么我会出错吗？以及如何预防？

Answer 1

将控制台日志添加到.loc将向您显示它正在尝试使用非数字作为索引，该索引将没有html内容。

### YOUR SETUP CODE
test = pd.DataFrame({'Begin': ['2014-06-11', '2014-08-05', '2014-09-21', '2014-09-21', '2014-09-21', '-'],
           'End1': ['2014-06-12', '2014-08-31', 'NaT', '2014-09-30', '2014-09-28', '-'],
            'End2': ['2014-06-14', '-', '2014-09-30', '-', '2014-09-28', '2014-12-15']})

test['Begin'] = pd.to_datetime(test['Begin'], dayfirst=False, yearfirst=False, errors='coerce', exact=False)
test['End1'] = pd.to_datetime(test['End1'], dayfirst=False, yearfirst=False, errors='coerce', exact=False)
test['End2'] = pd.to_datetime(test['End2'], dayfirst=False, yearfirst=False, errors='coerce', exact=False)

## DEFAULT RANGE FIELDS TO NULL
test['Begin-End1_bdate'] = np.nan
test['Begin-End2_bdate'] = np.nan

### USE LOC TO FIND NON-NULL ROWS
test.loc[(test['Begin'].notnull()) & (test['End1'].notnull()), 'Begin-End1_bdate'] = test[(test['Begin'].notnull()) & (test['End1'].notnull())].apply(lambda row: len(pd.bdate_range(row['Begin'], row['End1'])), axis = 1)
test.loc[(test['Begin'].notnull()) & (test['End2'].notnull()), 'Begin-End2_bdate'] = test[(test['Begin'].notnull()) & (test['End2'].notnull())].apply(lambda row: len(pd.bdate_range(row['Begin'], row['End2'])), axis = 1)

test

与其在jQuery对象上使用for循环，不如使用库的$("#loop").on('click',function(){ kid= $("#some123").children(); for(i in kid){ console.log('what is the key? ', i); console.log($(kid[i]).html()) } }) $("#loop2").on('click',function(){ kid= $("#some123").find('li'); for(i in kid){ console.log('what is the key? ', i); console.log($(kid[i]).html()) } })方法。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol id='some123'>Items
  <li draggable='true'>Item 1</li>
  <li draggable='true'>Item 2</li>
  <li draggable='true'>Item 3</li>
  <li draggable='true'>Item 4</li>
</ol>
<div id='loop'>Loop1</div>
<div id='loop2'>Loop2</div>

each()

Answer 2

如果检查对象（kid.children（）），将看到还有一个prevObject，该对象没有html（）函数。

//这是更新的版本

$("#loop").on('click',function(){
kid= $("#some123").children();
console.log(kid)
for(i in kid){
  if (kid[i].html)    // <<< check if that element is your li element
    console.log($(kid[i]).html())
}})

Answer 3

这不是迭代jQuery集合的正确方法，因为for...in用于迭代属性。使用each()方法进行迭代，并且可以在回调中使用this来引用元素。

$("#loop").on('click', function() {
  $("#some123").children().each(function() {
    console.log($(this).html())
  });
})
$("#loop2").on('click', function() {
  $("#some123").find('li').each(function() {
    console.log($(this).html())
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol id='some123'>Items
  <li draggable='true'>Item 1</li>
  <li draggable='true'>Item 2</li>
  <li draggable='true'>Item 3</li>
  <li draggable='true'>Item 4</li>
</ol>
<div id='loop'>Loop1</div>
<div id='loop2'>Loop2</div>

遍历孩子的元素抛出错误

3 个答案: