0

私が探しているのは、クリックされたリンクの親にrow-fluid、所定の子と一致する id が含まれているかどうかを判断する方法です。

私がこれまでに試したことはここにあります。(jsフィドル)

私のコードが機能しない理由を誰か説明してもらえますか? また、私のコーディングはかなりひどいので、短縮コードに関するアドバイスは何でも構いません。物事をよく考えすぎる傾向がある

<div class="row-fluid">
    <div id="success-1">Entry One</div>
    <div class="span3"> <a href="#" id="1" class="delete-me">delete</a>

    </div>
</div>
<div class="row-fluid">
    <div id="accord-2">Entry Two</div>
    <div class="span3"> <a href="#" id="2" class="delete-me">delete</a>

    </div>
</div>
<div class="row-fluid">
    <div id="success-3">Entry Three</div>
    <div class="span3"> <a href="#" id="3" class="delete-me">delete</a>

    </div>
</div>

JS:

$('.delete-me').on('click', function () {
    var id = $(this).attr("id");
    if ($(this).parent(".row-fluid").has("#accord-*")) {
        var name = $("#accord-" + id).html();
        alert(name);
    }else{
        var name = $("#success-" + id).html();
        alert(name);
    }
});
4

3 に答える 3

3

以下が機能します - の条件のみifが変更されました:

$('.delete-me').on('click', function () {
    var id = $(this).attr("id");
    if ($(this).closest(".row-fluid").has("[id^='accord-']").length > 0) {
        var name = $("#accord-" + id).html();
        alert(name);
    }else{
        var name = $("#success-" + id).html();
        alert(name);
    }
});

デモ: http://jsfiddle.net/RZPW2/15/

あなたの状態の主な問題if：

if($(this).parent(".row-fluid").has("#accord-*")) {

.has()...メソッドはブール値ではなくjQueryオブジェクトを返し、どのオブジェクトも真実であるため、常に真実であるということです。

また、.parent()メソッドは直接の親要素のみを取得します。これは、アンカーの場合は.row-fluid要素ではありません。.closest()代わりに、そのクラスで最も近い祖先に移動するために使用します。

最後に、id特定の文字列で始まる で選択するには、属性 starts with selector を使用します。

各グループに常にaccord-*またはsuccess-*要素のいずれかが含まれる場合は、代わりにそれらの両方に共通のクラスを与えることができます。

<div id="success-1" class="entryName">Entry One</div>

...その場合、ifテストはまったく必要ないからです。

$('.delete-me').on('click', function () {
    var name = $(this).closest(".row-fluid").find(".entryName").html();
    alert(name);
});

デモ: http://jsfiddle.net/RZPW2/18/

于 2013-08-11T21:44:48.290 に答える
2

コードに関するいくつかの問題:

  1. $(this).parent(".row-fluid")行がリンクの直接の親ではないため、機能しません。closest(".row-fluid")上にトラバースして、セレクターに一致する最初の親を見つけるために使用する必要があります

  2. のようにセレクターでワイルドカードを使用することはできません。selector:で始まる属性has("#accord-*")を使用する必要があります。また、ブール値ではなく jQuery オブジェクトを返します。"[id^='accord-']"has()

  3. 実際の問題ではありませんが、データ属性を使用して HTML5 標準に準拠する必要があります<a href="#" data-id="3" class="delete-me">delete</a>

そして、物事を少し単純化したい場合は、次のように書くことができます

$('.delete-me').on('click', function () {
    var id = $(this).data('id');
    alert($(this).closest('.row-fluid').find('#success-'+id+',#accord-'+id).text());
});

更新されたフィドル

于 2013-08-11T21:45:38.313 に答える
0

今、私はこれについて 100% ではありませんが、適切な親にアクセスして、そこから をトラバースしDOMて適切な を取得することに関係していると思いますDIV。それが常に の構造である場合はDIV、次のように処理できます。

$(".delete-me").on("click", function () {
    var obj = $(this), id = obj.attr("id"), parent = obj.parent().parent(), name = parent.find("div[id$='-" + id + "']").html();
    alert(name);
});

セレクター( ) で終了を使用するid$=か、またはそれがツリー内の唯一DIVのものであるため、次のように has 属性IDを使用できます。

$(".delete-me").on("click", function () {
    var obj = $(this), parent = obj.parent().parent(), name = parent.find("div[id]").html();
    alert(name);
});
于 2013-08-11T21:47:14.377 に答える