1

jQuery を使用して、リンクがテキスト リンクか画像リンクかを判断したいと考えています。テキストリンクの場合は、テキストを取得したい。画像リンクなら画像のIDを取得したいです。テキストリンクに .text() を使用してみましたが、これは画像リンクにも true を返します。

function get_link_content(object) {

            if($(object).text()) {
                var link_content = $(object).text();
            }
// even if it's an image link, this ^^ always returns true
            else if($(object).find('img')) {
                if($(object).find('img').attr('id')) {
                    var link_content = $(object).find('img').attr('id');
                }
                else {
                    var link_content = 'unidentified';
                }
            }

            return link_content;
        }

テキスト リンクとは、次のことを意味します。

<a href="#">This is a text link</a>

画像リンクとは、次のことを意味します。

 <a href="#"><img id="the-id" src="#"></a>

.text() 以外に使用する必要がある別の方法はありますか?

4

5 に答える 5

2 
if( $('img', $(object)).length ){
//object has a img as child
}
else{
//object doesnt have
}

また

var myText = $('img', $(object)).length ? $('img', $(object)).attr('id') 
             : $(object).text();

または関数として

function get_link_content(object) {
    return $('img', $(object)).length ? $('img', $(object)).attr('id') 
                 : $(object).text();
}

また

return ( $('img', $(object)) && $('img', $(object)).attr('id') ) || $(object).text();

@undefined の提案からすべての長さを has() に変更し、「has()」のドキュメントを読んだ後に長さに戻しました:P

于 2012-08-29T22:41:43.383 に答える
1

以下は、クリーンアップされ、わずかに最適化されたバージョンのコードです。

function get_link_content(object) {
  var $object = $(object), // Cache the element for faster execution
      $img = $object.find('img'),
      link_content,
      id;

  if (!$img.length) { // Does the object element not have an image?
    link_content = $object.text();
  } else {
    id = $img.attr('id'); // Get the image ID (if it exist)

    if (id.length) { // Was there an ID?
      link_content = id;
    } else {
      link_content = 'unidentified';
    }
  }

  return link_content;
}

編集：これはさらに最適化されたバージョンです（jQuery要素が渡されています）。

function get_link_content($object) {
  var $img = $object.find('img'),
      link_content;

  if (!$img.length) { // Does the object element not have an image?
    link_content = $object.text();
  } else {
    link_content = $img.attr('id'); // Get the image ID (if it exist)

    if (!link_content.length) { // Was there no ID?
      link_content = 'unidentified';
    }
  }

  return link_content;
}

ご覧のとおり、 を削除しました。とにかく ( が存在し、値があった場合)idに格納されるためです。これは、変数に id 値を割り当ててから、値があれば 2 番目のステップで に割り当てる必要がないため、を持つ画像に遭遇したときにわずかに高速になることを意味します。また、最初のバージョンよりも少し短く、読みやすさが少し向上しています。link_contentididididlink_element

于 2012-08-29T23:32:33.937 に答える
1

jQuery オブジェクトのlengthプロパティを使用できます。

var $obj = $(object);
if(!$obj.children().length) {
    var link_content = $obj.text();
} else {
    var link_content = $('img', $obj).attr('id');
    // ...
}

$(object)jQuery オブジェクトを何度も作成する代わりに、 をキャッシュできることに注意してください。

于 2012-08-29T22:41:05.913 に答える
1 
function get_link_content(e) {
        if($(e).find('img').length != 0) {
            if($(e).find('img').attr('id')) {
                var link_content = $(e).find('img').attr('id');
            } else {
                var link_content = 'unidentified';
            }
        } else {
            var link_content = $(object).text();
        }
        return link_content;
    }

$(object).find('img')- これは常に jQuery オブジェクトを返し、オブジェクトは常に true です。jQuery が何らかの要素を見つけたかどうかを確認するには、length プロパティを使用する必要があります。

ところで: $(e).find('img').attr('id') - これを何度も行うのは最善の方法ではありません。一度値を取得して、一時変数に入れる方がよいでしょう。

于 2012-08-29T22:41:35.227 に答える
1 
function get_link_content(object) {
    var link_content = 'unidentified';
    var $img = $(object).find('img');
    if(!$img.length){
      //no image found
      //get the text
      var $txt = $(object).text();
      if($txt.length){
          link_content = $txt;
      }
    }else{
      //there's an image
      link_content = $img.attr('id');
    }
    return link_content;
}
于 2012-08-29T22:44:54.767 に答える